DEV Community

Swislok-Dev
Swislok-Dev

Posted on

Grid Cheat sheet

#css #grid #cheatsheet

Grid Container

display

Sets the grid container to either a block or inline level grid for grid items.

Property Description
grid block grid
inline-grid inline grid

grid-template-columns

Specifies how many columns and to what size the column widths will be. It is also possible to name the columns:

.grid-container {
  grid-template-columns: [column1] 50% [column2] 40% [column3] 10%;
}
Enter fullscreen mode Exit fullscreen mode

A shorthand for creating same sized columns, repeat(<amount>, <size>) can be used:

.grid-container {
  grid-template-columns: repeat(3, 50px);
}
Enter fullscreen mode Exit fullscreen mode

Which would be the same as writing:

.grid-container {
  grid-template-columns: 50px 50px 50px;
}
Enter fullscreen mode Exit fullscreen mode

Track Sizes

It is possible to add too many pixels or a percentage that would cause the columns to overflow off the page (data-loss) and the fr unit helps to prevent that.

The fr unit will take a fraction of what space is available to keep the columns on screen and also will adjust size according to the viewport size.

Values Description
10px set column width to 10 pixels
10% set column width to 10%
2fr set column width as a fraction of free space

NOTE:

All values used with grid-template-columns can be applied to grid-template-rows for the rows instead.

grid-template-areas

Uses template referencing by giving names to grid areas using the grid-area property.

Values Description
grid-area-name the name of a grid area
. empty grid cell
none no grid areas are defined 
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(2, 25px);
  grid-template-areas:
    "header header header"
    "sidebar item-1 . "
}

.grid-item-1 {
  grid-area: item-1;
}

.grid-item-2 {
  grid-area: header;
}

.grid-item-3 {
  grid-area: sidebar;
}
Enter fullscreen mode Exit fullscreen mode

grid-template

Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas for a single line declaration.

Values Description
none sets all three properties to initial values
rows / columns sets the grid-template with a value 
.grid-container {
  grid-template: 
    [row1-start] "header header header " 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
Enter fullscreen mode Exit fullscreen mode

Which would be the same as:

.grid-container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto:
  grid-template-areas:
    "header header header"
    "footer footer footer";
}
Enter fullscreen mode Exit fullscreen mode

column-gap, row-gap, grid-column-gap, grid-row-gap

Defines the size of the grid lines also knowns as gutters.

Value Description
<line-size> a length value

gap, grid-gap

Shorthand for row-gap and column-gap.

Values Description
<row-gap> <column-gap> length values 
.grid-container {
  gap: <row-gap> <column-gap>;
}
Enter fullscreen mode Exit fullscreen mode

justify-items

Values Description
start aligns items to the start of the cell
end aligns items to the end of the cell
center aligns items to the center of the cell
stretch fills the whole width of the cell (default)

Note
This can be set individually by setting the justify-self property to a child.

align-items

Aligns items along the column axis.

Values Description
stretch fills the whole height of the cell (default)
start aligns items to the start of the cell
end aligns items to the end of the cell
center aligns items to the center of the cell
baseline aligns items along the text baseline with modifiers: first baseline or last baseline in the case of multi-line text

place-items

Sets both align-items and justify-items in a single declaration.

Values Description
<align-item> / <justify-items> If the second value is not filled in, the first value will be given to both properties

justify-content

Aligns the grid along the row axis.

Values Description
start aligns grid to the start of the container
end aligns grid to the end of the container
center aligns grid to the center of the container
stretch resizes the grid items to fill the width of the container
space-around places items an even amount from each other and half from edges
space-between places even amount of space between items with the first being placed at the start of the container and the last item to the end of the container
space-evenly places even amount of space between items from each other and the start and end of the container

align-content

Aligns the grid along the column axis.

Values Description
start aligns grid to the top of the container
end aligns grid to the bottom of the container
center aligns grid vertically center of the container
stretch resizes items to fill top to bottom of the container
space-around even spacing between items, half space from edges
space-between even spacing between items with no spaces at far ends
space-evenly even amount of space between items and far ends

place-content

Shorthand for align-content and justify-content. If the second value is omitted the first will be used for both.

grid-auto-columns, grid-auto-rows

Specifies the size of auto generated items.

.grid-container {
  grid-auto-columns: 60px;
}
Enter fullscreen mode Exit fullscreen mode

For any columns that should be added, they will have a width of 60 pixels.

grid-auto-flow

Controls of the auto-placement works.

Values Description
row generates new rows (default)
column generates new columns as necessary
dense attempts to fill in holes earlier if smaller items are generated

grid

Shorthand for setting all properties in a single declaration: grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

Values Description
none sets all sub-properties to initial values
<grid-template> works the same as grid-template shorthand
<grid-template-rows> / [ auto-flow ] <grid-auto-columns> sets grid-template-rows, if the auto-flow keyword is used on the right side, sets grid-auto-flow to column, on the left side will be set to row, if grid-auto-columns is omitted, set to auto by default

Equivalent Examples 

.grid-container {
  grid: 100px 300px / 3fr 1fr;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}
Enter fullscreen mode Exit fullscreen mode 
.grid-container {
  grid: auto-flow / 200px 1fr;
}

.grid-container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}
Enter fullscreen mode Exit fullscreen mode 
.grid-container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.grid-container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}
Enter fullscreen mode Exit fullscreen mode 
.grid-container {
  grid: 100px 300px / auto-flow 200px;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}
Enter fullscreen mode Exit fullscreen mode 
.grid-container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

.grid-container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

yashjain99 profile image

Build collapsible sidebars using just CSS

Yash Jain -

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -

sandygalabada profile image

Blur page body when hover on Nav Bar

Sandy Galabada -

codingashish_dev profile image

5 Ways to Add Tailwind CSS to Your Project

Ashish Prajapati -