Grid Flashcards
Which property creates gutters between grid columns?
grid-column-gap
Which property creates gutters between grid rows?
grid-row-gap
Which property creates grid rows?
grid-template-rows
Which property creates grid columns?
grid-template-columns
Shorthand property to create grid gaps.
grid-gap row-gap col-gap | rowcol-gap
Shorthand property to create grid templates.
grid-template
Share the available space equally between 3 grid columns.
grid-template-columns: 1fr 1fr 1fr;
Share the available space equally between 12 grid columns.
grid-template-columns: repeat(12, 1fr);
Reserve 50% of available space for the 1 grid column and share the rest between 2 more columns.
grid-template-columns: 50% repeat(2, 1fr);
Which properties can be replaced with shorthand property grid-area? (4 properties)
grid-row-start | grid-row-end | grid-column-start | grid-column-end
What is the shorhand for grid-row-start and grid-row-end properties
grid-row: #start / #end;
What is the shorhand for grid-column-start and grid-colum-end properties
grid-column: #start / #end;
What is the shorthand for grid-row and grid-column properties?
grid-area: #row-start / #col-start / #row-end / #col-end;
What is the first parameter of grid-area?
starting row line
What is the second parameter of grid-area?
starting column line
What is the third parameter of grid-area?
ending row line
What is the fourth parameter of grid-area?
ending column line
What is the first parameter of grid-row?
starting row line
What is the second parameter of grid-row?
ending row line
What is the first parameter of grid-column?
starting column line
What is the second parameter of grid-column?
ending column line
Tell grid that an item should start from starting column line 1 and occupy 3 cells.
grid-column: 1 / span 3;
Which property uses a name matrix to define grid areas?
grid-template-areas
Can you left a cell empty when using grid-template-areas?
No it won’t work. However you can use a dot (.) to define an empty cell within the grid-template-areas strings.
How can you tell grid-template-areas to left a cell empty?
Using a dot (.)
Change the height of implicit rows of the grid to 150px
grid-auto-rows: 150px;
By default grid inserts implicit rows, change this behavior to insert implicit columns.
grid-auto-flow: column;
What is the default value of grid-auto-flow property?
row
If you change the grid-auto-flow to column you should also replace the grid-auto-rows properties with […]
grid-auto-columns
What is the default value of grids justify-items property
justify-items: strecth;
Force items to fill the whole width of the grid cell (this is the default)
justify-items: strecth;
Align grid items to be flush with the start edge of their cell.
justify-items: start;
Which property aligns grid items along the row axis (a.k.a inline axis)?
justify-items
Align items to be flush with the end edge of their grid cell.
justify-items: end;
Align items in the center of their grid cell.
justify-items: center;
Which property aligns grid items along the column (block ) axis?
align-items
Force items to fill the whole height of the grid cell (this is the default).
align-items: stretch;
Center items vertically in their grid cells
align-items: center;
Aligns items to the bottom edge of their grid cell
align-items: end;
Aligns items to the top edge of their grid cell
align-items: start;
Which property aligns a individual grid item along the column (block ) axis?
align-self
Which property aligns a individual grid item along the row (inline) axis?
justify-self
Which properties are used to align grid tracks
justify-content | align-content
Which property is used to align grid tracks horizontally
justify-content
Which property is used to align grid tracks vertically
align-content
Grid properties that brings flexbox alike behavior to grid tracks
justify-content (horizontally)
align-content (vertically)
Special keyword that sets the width of a particular column of the grid to the same size as the widest element in the column.
grid-template-columns: max-content 1fr 1fr 1fr
do this for the first column
Special keyword that brings the width of a particular column of the grid to the same size as the narrowest element in the column.
grid-template-columns: min-content 1fr 1fr 1fr
do this for the first column
How can you assign a range width (min-max) to a grid column?
grid-template-columns: 1fr 1fr minmax(150px, 300px);
Let’s say we have a 800px wide grid container.
Divide it into 10 columns of equal width so that when there are not enough elements to fill these columns, the extra space should be kept occupied filled with empty slots.
grid-template-columns: repeat(auto-fill, 80px);
Let’s say we have a 800px wide grid container.
Divide it into 10 columns of equal width so that when there are not enough elements to fill these columns, the extra space should not occupy space collapsing the empty slots.
grid-template-columns: repeat(auto-fit, 80px);
