Flashcards
Introduction to the CSS Grid Challenges
Flashcards do conjunto (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
Informações
- Descrição
- Técnico Programação FlashCards sobre Introduction to the CSS Grid Challenges, criado por Rafael Rodrigues em 01-06-2020.
- Criado por
- Rafael Rodrigues · jun 2020
- Atualizado
- 1 jun 2020
- Visualizações
- 5
- Tags
- Avaliação