Css Grid Layout Flashcards
Learn CSS Grid Layout (aka “Grid” or “CSS Grid”): https://css-tricks.com/snippets/css/complete-guide-grid/
What is css grid?
css grid is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces
What is css grid solving?
layout problems and functionality like vertical centering
What did web devs needed to do to build the layout of a webpage before css grid?
tables, then floats, positioning and inline-block
When did css grid become supported by most browsers?
March 2017
What is the syntax to get started with css grid? (display)
display: grid
What is the syntax to set the column and row sizes?
grid-template-columns for columns and grid-template-rows for rows
What is the syntax to set the child elements into the grid?
grid-column for child columns and grid-row for child rows
Does source order matter in css grid?
No
Why is css grid one of the most powerful css modules ever introduced?
You are able to define one layout of the entire page then completely rearrange it to accommodate a different screen width all with only a couple lines of css
What is a grid container?
The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container
What is a grid item?
The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t
What is a Grid Line?
The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line
What is a Grid Cell?
The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3
What is a Grid Track?
The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here’s the grid track between the second and third-row grid lines.
What is a Grid Area?
The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.
