DEV Community

Julia Shlykova
Julia Shlykova

Posted on • Edited on

Grid Basics. Placing and aligning items

#css #beginners #tutorial

Table of contents

  1. Placing children inside a grid container using line numbers
  2. Grid areas
  3. Automatic flow
  4. Spacing and alignment

Placing children inside a grid container using line numbers

We can position children inside a grid container by setting grid lines between which they must be. For this, we use grid-row-start, grid-row-end, grid-column-start and grid-column-end with the following values:

  • auto (default) - indicates auto-placing so that child will occupy one track width;
  • grid line number - counting lines start with 1 and ends with -1;
  • spannumber - occupies number of cells. 
.grid {
 display: grid;
 grid-template-columns: 150px 1fr 150px;
 grid-template-rows: 100px 1fr 100px;
}

header {
 grid-row-start: 1;
 grid-row-end: 2;
 grid-column-start: 1;
 grid-column-end: span 3;
}

footer {
 grid-row-start: 3;
 grid-row-end: -1;
 grid-column-start: 1;
 grid-column-end: -1;
}
Enter fullscreen mode Exit fullscreen mode

We can position children also using grid-row and grid-column properties:

header {
 grid-row: 1 / 2;
 grid-column: 1 / span 3;
}
footer {
 grid-row: 3 / -1;
 grid-column: 1 / -1;
}
Enter fullscreen mode Exit fullscreen mode

Grid areas

Grid area is a rectangle consisting of grid cells (one or more). We can divide our grid into areas and then put every child into the specific area. To name areas, we use grid-template-areas, where every quotation represents a row and every word a cell. If we want empty space in the grid, we can use one or more dots for the grid area name.

.grid {
 grid-template-areas:
  "header header header"
  "... main ads"
  "footer footer footer";
}
Enter fullscreen mode Exit fullscreen mode

After we set names for grid areas, we can assign them to children:

header {
 grid-area: header;
}
main {
 grid-area: main;
}
aside {
 grid-area: ads;
}
footer {
 grid-area: footer;
}
Enter fullscreen mode Exit fullscreen mode

Defining areas using grid line numbers

It's not necessary to set names for areas; we can use grid line numbers for the property grid-area: row-start / column-start / row-end / column-end:

header {
 grid-area: 1 / 1 / 2 / 4;
}
footer {
 grid-area: 3 / 1 / -1 / -1;
}
Enter fullscreen mode Exit fullscreen mode

Counting starts with 1. We can refer to the last number as either -1 or the actual last count (in this case, it's 4).

grid shorthand property

We can use the grid shorthand property to set rows and columns like this: grid: rows / columns.

grid: 100px 1fr 100px / 150px 1fr 150px;
Enter fullscreen mode Exit fullscreen mode

We can also add areas to this shorthand:

grid:
 "header header header" 100px
 "... main ads" 1fr
 "footer footer footer" 100px 
 / 150px 1fr 150px;
Enter fullscreen mode Exit fullscreen mode

For complicated grid structure, it's better to stick to separate css properties for a clearer structure.

Automatic creation of rows and columns

If a number of children exceeds a number of cells or the position of the child is outside of the manually created grid, the browser generates additional grid row or column to accommodate them. By default, this newly created row or column has a size set to auto.

If we want to give a definite size to this automatically created row or column, we can use grid-auto-rows or grid-auto-columns properties.

.grid {
 grid: 150px 150px / 1fr 1fr;
 grid-auto-rows: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Automatic flow

We can specify the flow of auto-placing children by using grid-auto-flow. The values that grid-auto-flow can get:

  • row (default) - children fill each row, and new rows are created if needed;
  • column - children fill each column alternately, and new columns are created if needed;
  • dense - allows to fill "holes" in the grid by reordering children: 
.grid {
 display: grid;
 grid-template-columns: 200px 30px 30px;
 grid-auto-rows: 200px;
 grid-auto-flow: dense;

 & > :nth-child(2) {
  grid-column: span 3;
 }
}
Enter fullscreen mode Exit fullscreen mode

Spacing and alignment

We can set space between grid tracks using row-gap, column-gap and gap.

Alignment in grid uses the same vocabulary as in flexbox.

Aligning individual items

We can align children inside cells using justify-self (horizontal axis) and align-self (vertical axis).

  • start
  • end
  • center
  • left
  • right
  • self-start - depends on the writing direction of the child
  • self-end - depends on the writing direction of the child
  • stretch
  • normal- stretch for children without specified sizes and start for others
  • auto (default) - looks at justify-items or align-items correspondingly

Aligning all items at once

To do that we can use properties: justify-items and align-items with possible values:

  • start
  • end
  • center
  • left
  • right
  • self-start
  • self-end
  • stretch
  • normal (default)

Aligning tracks

When your columns or rows don't fill the entire container, you can align them using justify-content and align-content properties with values:

  • start (default)
  • end
  • left
  • right
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly 
.grid {
 grid-template-columns: repeat(4, 100px);
 grid-auto-rows: auto;
 justify-content: space-between;
 align-content: stretch;
}
Enter fullscreen mode Exit fullscreen mode

sretch value works only if column width or row height is set to auto.

Top comments (0)