CSS

Last Updated: 10/31/2022

Grid

  • Use grid to layout content in both rows and columns.
  • A grid layout consists of a parent element, with one or more child elements.

Container

  • An HTML element becomes a grid container when its display property is set to grid or inline-grid.
.container {
	display: grid;
}

<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>    
</div>

grid-template-rows

  • Defines the number and size of rows.
  • The value is a space-separated-list, where each value defines the height of the respective row
grid-template-rows: 100px 100px;
grid-template-rows: repeat(3, 100px);
grid-template-rows: 100px 30fr 70fr;
grid-template-rows: 100px auto 100px;

grid-template-columns

  • Define the number and size of columns.
grid-template-columns: 100px 100px;
grid-template-columns: repeat(2, 100px);
grid-template-columns:  auto auto auto auto;

grid-template

  • Shorthand for grid template rows and columns.
grid-template: grid-template-rows / grid-template-columns;
grid-template: repeat(3, 100px) / repeat(2, 100px);

justify-content

  • Used to align the whole grid inside its container in horizontal axis.
  • The grid's total width has to be less than the container's width for the justify-content property to have any effect.
  • Possible values are start, end, center, space-between, space-evenly, space-around
justify-content: center;

align-content

  • Used to align the whole grid inside its container in vertical axis.
  • The grid's total height has to be less than the container's height for the align-content property to have any effect.

row-gap

  • Specifies the gap between the rows
row-gap: 10px;

column-gap

  • Specifies the gap between the rows
column-gap: 10px;

gap

  • Shorthand for row-gap and column-gap
gap: 10px 15px; /* row-gap column-gap */
gap: 10px; /* common value */

Items

Aligning Items

  • In grid, items are automatically placed from top left to bottom right.
  • You can easily align these items along the horizontal or vertical axis.

justify-items

  • Used to align items along the horizontal axis,
  • Default value is stretch. The item stretches horizontally to fill his containing cell when no width is specified
justify-items: center

align-items

  • Used to align items along the vertical axis,
  • Default value is stretch. The item stretches vertically to fill his containing cell when no height is specified
align-items: center

Placing Items

grid-column

  • To place an item, you can refer to line numbers, or use the keyword span to define how many columns the item will span.
  • The other items are automatically placed from top left to bottom right.
grid-column: 2; /* place item on row 1 column 2 */
grid-column: 1 / 3; /* item expands from column line 1 to line 3 */
grid-column: 1 / -1; /* item expands from column line 1 to line 3 or -1 */
grid-column: 1 / span 2 /* item span 2 columns */

grid-row

grid-row: 2; /* place item on row 2*/
grid-row: 2 / 4; /* items expands from row line 2 to line 4*/;
grid-row: 2 / span 2; /* item span 2 rows */

grid-row-start property defines on which row-line the item will start. grid-row-end property defines how many rows an item will span, or on which row-line the item will end grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the grid-row-start and grid-row-end

grid-area

  • shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.
grid-area: 1 / 1 / 1 / 3;

Naming Grid Items

grid-template-areas

  • Allows to define specific areas in our grid, and then placing our items
  • Each row is defined by single or double quotes
  • Columns in each row is defined inside the quotes, separated by a space.
  • A period sign represents a grid item with no name.
grid-template-areas: 
"header header" 
"sidebar main" 
"footer footer";

grid-area

div.heaader {
	grid-area: header
}
div.footer {
	grid-area: footer
}
Previous
Next