Swislok-Dev

Posted on Aug 6, 2022

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%;
}

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

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

Which would be the same as writing:

.grid-container {
  grid-template-columns: 50px 50px 50px;
}

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;
}

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;
}

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";
}

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>;
}

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;
}

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;
}

.grid-container {
  grid: auto-flow / 200px 1fr;
}

.grid-container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

.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;
}

.grid-container {
  grid: 100px 300px / auto-flow 200px;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

.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;    
}

DEV Community