12/26/23, 11:02 AM Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy

Cheatsheets / Making a Website Responsive

Learn CSS: Grid

Grid Template Columns

To specify the number of columns of the grid and the #grid-container {

widths of each column, the CSS property grid-
display: grid;
template-columns is used on the grid container. The
number of width values determines the number of width: 100px;
columns and each width value can be either in grid-template-columns: 20px 20% 60%;
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
In this example, the second column take
unit is a fraction of the grid’s overall length and width. If
a fixed unit is used along with fr (like pixels for 60px of the avaiable 100px so the first
example), then the fr units will only be proportional to and third columns split the remaining
the distance left over. available 40px into two parts (`1fr` =
50% or 20px)
*/

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

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 1/9
12/26/23, 11:02 AM Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy

Grid Gap

The CSS grid-gap property is a shorthand way of // The distance between rows is 20px
setting the two properties grid-row-gap and grid-
// The distance between columns is 10px
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 and while the #grid-container {
second value sets the size of the gap between columns.
display: grid;
grid-gap: 20px 10px;
}

CSS Block Level Grid

CSS Grid is a two-dimensional CSS layout system. To set #grid-container {

an HTML element into a block-level grid container use
display: grid;
display: grid property/value. The nested elements
inside this element are called grid items. }

CSS grid-row

The CSS grid-row property is shorthand for the /*CSS Syntax */

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

CSS Inline Level Grid

CSS Grid is a two-dimensional CSS layout system. To set #grid-container {

an HTML element into a inline-level grid 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.

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 2/9
12/26/23, 11:02 AM Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy

minmax() Function

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

grid-row-start & grid-row-end

The CSS grid-row-start and grid-row-end /* CSS syntax:

properties allow single grid items to take up multiple
grid-row-start: auto|row-line;
rows. The grid-row-start property defines on which
row-line the item will start. The grid-row-end grid-row-end: auto|row-line|span n;
property defines how many rows an item will span, or */
on which row-line the item will end. The keyword
grid-row-start: 2;
span can be used with either property to
automatically calculate the ending value from the grid-row-end: span 2;
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 /*CSS Syntax */

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

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 3/9
12/26/23, 11:02 AM Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy

CSS grid-area

The CSS grid-area property specifies a grid item’s size .item1 {

and location in a grid layout and is a shorthand
grid-area: 2 / 1 / span 2 / span 3;
property for the grid-row-start , 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 {

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

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).

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 4/9
12/26/23, 11:02 AM Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy

CSS grid-template-areas

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

CSS grid-auto-flow

The CSS grid-auto-flow property specifies whether /*CSS Syntax */

implicity-added elements should be added as rows or
grid-auto-flow: row|column|dense|row
columns within a grid or, in other words, it controls how
auto-placed items get inserted in the grid and this dense|column dense;
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/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 5/9
12/26/23, 11:02 AM Making a Website Responsive: 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/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 6/9
12/26/23, 11:02 AM Making a Website Responsive: 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/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 7/9
12/26/23, 11:02 AM Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy

Justify Self

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

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

Print Share

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 8/9
12/26/23, 11:02 AM Making a Website Responsive: Learn CSS: Grid Cheatsheet | Codecademy
0

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-grid-549234ef-7622-479b-8d5d-0b4c91998… 9/9