5/19/2020 Learn CSS: Grid Cheatsheet | Codecademy

Cheatsheets / Learn CSS

Grid
Grid Template Columns
To specify the number of columns of the grid and the
widths of each column, the CSS property grid- #grid-container {
template-columns is used on the grid display: grid;
container. The number of width values determines width: 100px;
the number of columns and each width value can be grid-template-columns: 20px 20% 60%;
either in pixels( px ) or percentages(%). }

fr Relative Unit
The CSS grid relative sizing unit fr is used to split
rows and/or columns into proportional distances. /*
Each fr unit is a fraction of the grid’s overall In this example, the second column take
length and width. If a fixed unit is used along with 60px of the avaiable 100px so the first
fr (like pixels for example), then the fr units will and third columns split the remaining
only be proportional to the distance left over. available 40px into two parts (`1fr` =
50% or 20px)
*/

.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}

Grid Gap
The CSS grid-gap property is a shorthand way
of setting the two properties grid-row-gap and
// The distance between rows is 20px
// The distance between columns is 10px
grid-column-gap . It is used to determine the
size of the gap between each row and each column.
The first value sets the size of the gap between rows
#grid-container {
and while the second value sets the size of the gap display: grid;
between columns. grid-gap: 20px 10px;
}

CSS Block Level Grid

CSS Grid is a two-dimensional CSS layout system.
To set an HTML element into a block-level grid #grid-container {
container use display: grid property/value. display: block;
The nested elements inside this element are called }
grid items.

https://www.codecademy.com/learn/learn-css/modules/learn-css-grid/cheatsheet 1/7
5/19/2020 Learn CSS: Grid Cheatsheet | Codecademy

CSS grid-row
The CSS grid-row property is shorthand for the
grid-row-start and grid-row-end /*CSS Syntax */
properties specifying a grid item’s size and location grid-row: grid-row-start / grid-row-
within the grid row. The starting and ending row end;
values are separated by a / . There is a
corresponding grid-column property shorthand
/*Example*/
that implements the same behavior for columns. .item {
grid-row: 1 / span 2;
}

CSS Inline Level Grid

CSS Grid is a two-dimensional CSS layout system.
To set an HTML element into a inline-level grid #grid-container {
container use display: inline-grid display: inline-grid;
property/value. The nested elements inside this }
element are called grid items.
The difference between the values inline-grid
and grid is that the inline-grid will make
the element inline while grid will make it a block-
level element.

minmax() Function
The CSS Grid minmax() function accepts two
parameters: /* In this example, the second column
will vary in size between 100px and
● The first parameter is the minimum size of a 500px depending on the size of the web
row or column. browser" */
● The second parameter is the maximum size.
.grid {
The grid must have a variable width for the
display: grid;
minmax() function. grid-template-columns: 100px
If the maximum value is less than the minimum, then
minmax(100px, 500px) 100px;
the maximum value is ignored and only the minimum
}
value is used.
The function can be used in the values of the
grid-template-rows , grid-template-
columns and grid-template properties.

https://www.codecademy.com/learn/learn-css/modules/learn-css-grid/cheatsheet 2/7
5/19/2020 Learn CSS: Grid Cheatsheet | Codecademy

grid-row-start & grid-row-end

The CSS grid-row-start and grid-row-
end properties allow single grid items to take up /* CSS syntax:
grid-row-start: auto|row-line;
multiple rows. The grid-row-start property
grid-row-end: auto|row-line|span n;
defines on which row-line the item will start. The
*/
grid-row-end property defines how many
grid-row-start: 2;
rows an item will span, or on which row-line the item
grid-row-end: span 2;
will end. The keyword span can be used with
either property to automatically calculate the ending
value from the starting value or vice versa. There are
complementary grid-column-start and
grid-column-end properties that apply the
same behavior to columns.

CSS grid-row-gap
The CSS grid-row-gap property determines
the amount of blank space between each row in a /*CSS Syntax */
CSS grid layout or in other words, sets the size of the grid-row-gap: length; /*Any legal
gap (gutter) between an element’s grid rows. The length value, like px or %. 0 is the
grid-column-gap provides the same default value*/
functionality for space between grid columns.

CSS grid-area
The CSS grid-area property specifies a grid
item’s size and location in a grid layout and is a .item1 {
shorthand property for the grid-row-start , grid-area: 2 / 1 / span 2 / span 3;
grid-column-start , grid-row-end , and }

grid-column-end in that order. Each value is

separated by a / .
In the included example, Item1 will start on row 2
and column 1, and span 2 rows and 3 columns

Justify Items
The justify-items property is used on a grid
container. It’s used to determine how the grid items #container {
are spread out along a row by setting the default display: grid;
justify-self property for all child boxes. justify-items: center;
The value start aligns grid items to the left side grid-template-columns: 1fr;
of the grid area. grid-template-rows: 1fr 1fr 1fr;
The value end aligns grid items to the right side of grid-gap: 10px;
the grid area. }
The value center aligns grid items to the center
of the grid area.
The value stretch stretches all items to fill the
grid area.

https://www.codecademy.com/learn/learn-css/modules/learn-css-grid/cheatsheet 3/7
5/19/2020 Learn CSS: Grid Cheatsheet | Codecademy

Align Self
The CSS align-self property is used to set
how an individual grid item positions itself along the
column or block axis. By default grid items inherit the
value of the align-items property on the
container. So if the align-self value is set, it
would over-ride the inherited align-items
value.
The value start positions grid items on the top of
the grid area.
The value end aligns the grid on the bottom of the
grid area.
The value center positions grid items on the
center of the grid area.
The value stretch positions grid items to fill the
grid area (default).

CSS grid-template-areas
The CSS grid-template-areas property
allows the naming of sections of a webpage to use /* Specify two rows, where "item" spans
as values in the grid-row-start , grid- the first two columns in the first two
row-end , grid-column-start , grid- rows (in a four column grid layout)*/
.item {
column-end , and grid-area properties.
grid-area: nav;
They specify named grid areas within a CSS grid.
}
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
'nav nav . .';
}

CSS grid-auto-flow
The CSS grid-auto-flow property specifies
whether implicity-added elements should be added /*CSS Syntax */
as rows or columns within a grid or, in other words, it grid-auto-flow: row|column|dense|row
controls how auto-placed items get inserted in the dense|column dense;
grid and this property is declared on the grid
container.
The value row specifies the new elements should
fill rows from left to right and create new rows when
there are too many elements (default).
The value column specifies the new elements
should fill columns from top to bottom and create
new columns when there are too many elements.
The value dense invokes an algorithm that
attempts to fill holes earlier in the grid layout if
smaller elements are added.

https://www.codecademy.com/learn/learn-css/modules/learn-css-grid/cheatsheet 4/7
5/19/2020 Learn CSS: Grid Cheatsheet | Codecademy

Justify Content
Sometimes the total size of the grid items can be
smaller than the grid container. If this is the case, the
CSS property justify-content can be used
to position the entire grid along the row or inline axis
of the grid container.
The value start aligns the grid to the left side of
the grid container.
The value end aligns the grid to the right side of
the grid container.
The value center centers the grid horizontally in
the grid container.
The value stretch stretches the grid items to
increase the size of the grid to expand horizontally
across the container.
The value space-around includes an equal
amount of space on each side of a grid element,
resulting in double the amount of space between
elements as there is before the first and after the last
element.
The value space-between includes an equal
amount of space between grid items and no space at
either end.
The value space-evenly places an even
amount of space between grid items and at either
end.

https://www.codecademy.com/learn/learn-css/modules/learn-css-grid/cheatsheet 5/7
5/19/2020 Learn CSS: Grid Cheatsheet | Codecademy

Align Content
Some times the total size of the grid items can be
smaller than the grid container. If this is the case, the
CSS property align-content can be used to
position the entire grid along the column axis of the
grid container.
The property is declared on the grid container.
The value start aligns the grid to the top of the
grid container.
The value end aligns the grid to the bottom of the
grid container.
The value center centers the grid vertically in the
grid container.
The value stretch stretches the grid items to
increase the size of the grid to expand vertically
across the container.
The value space-around includes an equal
amount of space on each side of a grid element,
resulting in double the amount of space between
elements as there is before the first and after the last
element.
The value space-between includes an equal
amount of space between grid items and no space at
either end.
The value space-evenly places an even
amount of space between grid items and at either
end.

CSS grid-auto-rows
The CSS grid-auto-rows property specifies
the height of implicitly added grid rows or it sets a
size for the rows in a grid container. This property is
declared on the grid container. grid-auto-
columns provides the same functionality for
columns. Implicitly-added rows or columns occur
when there are more grid items than cells available.

https://www.codecademy.com/learn/learn-css/modules/learn-css-grid/cheatsheet 6/7
5/19/2020 Learn CSS: Grid Cheatsheet | Codecademy

Justify Self
The CSS justify-self property is used to set
how an individual grid item positions itself along the // The grid items are positioned to the
row or inline axis. By default grid items inherit the right (end) of the row.
value of the justify-items property on the
container. So if the justify-self value is set, it #grid-container {
would over-ride the inherited justify-items
display: grid;
value. justify-items: start;
The value start positions grid items on the left
}
side of the grid area.
The value end positions the grid items on the right
.grid-items {
side of the grid area.
justify-self: end;
The value center positions grid items on the
}
center of the grid area.
The value stretch positions grid items to fill the
grid area (default).

CSS grid-area
The CSS grid-area property allows for
elements to overlap each other by using the z-
index property on a particular element which tells
the browser to render that element on top of the
other elements.

Align Items
The align-items property is used on a grid
container. It’s used to determine how the grid items #container {
are spread out along the column by setting the display: grid;
default align-self property for all child grid align-items: start;
items. grid-template-columns: 1fr;
The value start aligns grid items to the top side grid-template-rows: 1fr 1fr 1fr;
of the grid area. grid-gap: 10px;
The value end aligns grid items to the bottom side }
of the grid area.
The value center aligns grid items to the center
of the grid area.
The value stretch stretches all items to fill the
grid area.

https://www.codecademy.com/learn/learn-css/modules/learn-css-grid/cheatsheet 7/7