Item.md

< Previous     Next >

---

Note: if you cant read text on images below, either you are blind or you have dark mode on.

Child Elements

A grid container contains grid items.
By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

grid-column

The grid-column property defines on which column(s) to place an item.
You define where the item will start, and where the item will end.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.

.item1 {
  grid-column: 1 / 5;
}

.item1 {
  grid-column: 1 / span 3;
}

.item2 {
  grid-column: 2 / span 3;
}

grid-row

The grid-row property defines on which row to place an item.
You define where the item will start, and where the item will end.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many rows the item will span:

.item1 {
  grid-row: 1 / 4;
}

.item1 {
  grid-row: 1 / span 2;
}

grid-area

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

grid-area

The grid-area property can also be used to assign names to grid items.

Named grid items can be referred to by the grid-template-areas property of the grid container.

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Each row is defined by apostrophes (' ')
The columns in each row is defined inside the apostrophes, separated by a space.

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

.item1{grid-area:header;}
.item2{grid-area:menu;}
.item3{grid-area:main;}
.item4{grid-area:right;}
.item5{grid-area:footer;}
.grid-container {
  grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
}

Order

The Grid Layout allows us to position the items anywhere we like.

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}