Grid Flashcards
What is CSS Grid?
A layout method for two-dimensional content using rows and columns.
What does CSS Grid allow the browser to do?
Auto-place items into created cells.
What are grid lines in CSS Grid?
The horizontal and vertical lines that form the structure of the grid.
How are grid lines numbered?
Starting from 1, following the writing mode and script direction.
What are grid tracks?
The space between two adjacent grid lines.
What is a grid cell?
The smallest space in a grid, formed by the intersection of row and column tracks.
What is a grid area?
A larger section of the grid created by spanning multiple grid cells.
What is the gap in CSS Grid?
The space (alley) between tracks.
What is a grid container?
An HTML element with display: grid, which creates a new grid formatting context.
What is a grid item?
A direct child of the grid container.
What does auto do in track sizing?
Makes a track as big as its content.
What does the min-content keyword do?
Sets the track to the smallest possible size without overflow.
What does the max-content keyword do?
Sets the track width so that content stays on a single line (may cause overflow).
What does fit-content() do?
Similar to max-content, but wraps content once it reaches a specified size.
How do auto-sized tracks behave by default?
They stretch to fill the container.
What is the fr unit in CSS Grid?
A flexible unit that distributes available space proportionally among tracks.
How do you define three equal columns using fr?
grid-template-columns: 1fr 1fr 1fr;
What does the minmax() function do?
Sets both a minimum and maximum size for a track.
What does minmax(0, 1fr) do?
Makes tracks share available space equally while allowing them to shrink to 0.
What is the repeat() function used for?
Repeats a track listing in a more concise way.
How do auto-fill and auto-fit differ?
auto-fill creates as many tracks as will fit, leaving empty tracks if necessary; auto-fit collapses empty tracks.
How are items placed by default in CSS Grid?
One per cell in the order they appear in the source, filling rows first.
How do you make items auto-place in columns instead of rows?
grid-auto-flow: column;
How can an item span multiple tracks in auto-placement?
Using grid-column-end: span X; or grid-row-end: span X;
What properties are used to place grid items by line number?
grid-column-start, grid-column-end, grid-row-start, grid-row-end
What are the shorthand properties for placing items?
grid-column and grid-row
How can you place an item from the first to the last column line?
grid-column: 1 / -1;
What is an explicit grid?
A grid created using grid-template properties with predefined tracks.
What is an implicit grid?
A grid where additional tracks are created automatically when items exceed the defined rows/columns.
How do you size implicit tracks?
Using grid-auto-rows or grid-auto-columns.
How do you define named grid lines?
By placing names inside square brackets in grid-template-columns or grid-template-rows.
How can named grid lines simplify placement?
Items can be positioned using names instead of line numbers.
What does justify- affect in CSS Grid?
The inline axis (horizontal alignment).
What does align- affect in CSS Grid?
The block axis (vertical alignment).
