Flashcards
Introduction to the CSS Grid Challenges
Cards in this deck (17)
- 1display: grid;This gives you the ability to use all the other properties associated with CSS Grid
- 2grid-template-columnsTo add some columns to the grid
- 3grid-template-columns: 50px 50px;This will give your grid two columns that are each 50px wide
- 4grid-template-rowsTo add some rows to the grid
- 5grid-template-columns: auto 50px 10% 2fr 1fr;The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth
- 6grid-template-columns: frSets the column or row to a fraction of the available space
- 7grid-template-columns: autoSets the column or row to the width or height of its content automatically
- 8grid-template-columns: %Adjusts the column or row to the percent width of its container
- 9grid-column-gapTo add a gap between the columns
- 10grid-row-gapTo add a gap between the rows
- 11grid-gapShorthand property for grid-row-gap and grid-column-gap
- 12grid-columnTo control the amount of columns an item will consume
- 13grid-column: 1 / 3;This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns
- 14grid-rowmake items consume multiple rows
- 15justify-selfBy default, this property has a value of stretch, which will make the content fill the whole width of the cell
- 16justify-self: start;Aligns the content at the left of the cell
- 17justify-self-end;aligns the content in the center of the cell
Information
- Description
- Técnico Programação Flashcards on Introduction to the CSS Grid Challenges, created by Rafael Rodrigues on 01/06/2020.
- Created by
- Rafael Rodrigues · Jun 2020
- Updated
- Jun 1, 2020
- Views
- 5
- Tags
- Rating