CSS - Grid

Grid Form With Horizontal Vertical Alignment

About

grid 1)is a CSS layout system that provides a mechanism:

With grid, you can easily defines layout that requires horizontal and vertical alignment such as the below form2)

Grid Form With Horizontal Vertical Alignment

Feature

  • Two axis location (Flex has only one)
  • Space distribution is two dimensional (Flex focuses on space distribution within an axis)

Flex Vs Grid Css 3)

Concept

Container

A grid container 4) is the container element that has the display value set to:

  • grid 5)
  • or inline-grid 6)
#grid  {
  display: grid;
}

It contains the grid.

Grid

The grid is defined 7) with the following three properties:

  • grid-template-rows,
  • grid-template-columns,
  • and grid-template-areas

They define the grid of a grid container by specifying its explicit grid tracks.

The grid property 8) is a shorthand that sets all of three explicit grid properties

Example: the following grid declares a grid with :

  • four named areas: H, A, B, and F.
  • the first column sized to fit its contents (auto),
  • the second column taking up the remaining space (1fr).
  • rows default to auto (content-based) sizing;
  • the last row given a fixed size of 30px.
main {
  grid: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
}

Area

A grid area 9) is a logical space name:

The grid area are defined using:

  • the grid-template-areas 10) property
  • or the grid shorthand

Example:

  • The below statement defined:
    • two areas: area1 and area2
    • and their space in the grid (ie mapping to grid cells)
#grid  {
  display: grid;
  grid-template-areas: ". area1"
                       "area2 area1"
                       ". area1";
}
  • The following declares a grid with:
    • three rows and 5 evenly-sized columns
    • the middle row taking up all remaining space (and at least enough to fit its contents).
main {
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
}

Positioning

You can specify the position where the element should go, using :

Longhand properties shorthand equivalent full shorthand equivalent
grid-row-start
grid-row-end 11)
grid-row 12) grid-area 13)
grid-column-start
grid-column-end 14)
grid-column 15) grid-area 16)
  • The number unit is the line number. ie 2 means the line 2
  • The value auto will place the item into the next available empty grid cell (growing the grid if there’s no space left) driven by the auto-placement algorithm.
  • It's possible to position absolutely an item inside its area in the grid 17)

Example:

Placement grid-area grid-row, grid-column grid-row-start/end, grid-column-start/end
Place into named grid area a
grid-area: a;
grid-row: a; 
grid-column: a;
grid-row-start: a; 
grid-row-end: a; 
grid-column-start: a; 
grid-column-end: a;
Auto-place into next empty area
grid-area: auto;
grid-row: auto;  
grid-column: auto;
Place into row 2, column 4
grid-area: 2 / 4;
grid-row: 2; 
/* Place item in the second row. */
grid-column: 4; 
/* Place item in the fourth column. */
Place into column 3, span all rows
grid-area: 1 / 3 / -1;
grid-row: 1 / -1; 
grid-column: 3;
/* 1st grid row line = top of grid container */
grid-row-start: 1; 
/* span all rows */
grid-row-end: -1;
/* 3rd grid col line */
grid-column-start: 3;
/* right padding edge */ 
grid-column-end: auto; 
Place using named lines
grid-area: header-start / 
sidebar-start / 
footer-end / 
sidebar-end;
grid-row: header-start / footer-end; 
grid-column: sidebar-start / sidebar-end;

In css, you would apply them in rule block. Example in a 2 columns x 3 rows.

#stats    { grid-column: 1; grid-row: 2; align-self: start; }
#controls { grid-column: 2; grid-row: 3; justify-self: center; }

Sizing

Sizing a grid means sizing the tracks. See the tracks definition section to know how to size a grid.

Item

The grid item 19) are:

As of Grid level 1, only the direct children of the container become grid items and can then be placed on the grid

Cell

A grid cell 20) is the intersection of:

  • a grid row
  • and a grid column.

It is the smallest unit of the grid that can be referenced when positioning grid items.

Track

Grid track 21) is a generic term for:

  • a grid column
  • or grid row

It's the space between any two adjacent lines on the grid.

The below properties define grid tracks:

  • the grid-template-columns
  • and grid-template-rows properties. .

They controls how wide or tall the column or row may grow.

The sizing calculation is done by the grid sizing algorithm

Example of a Grid with two columns and three rows. 22)

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;  /* two columns */
  grid-template-rows: 50px 1fr auto; /* three rows  */
}

where:

  • Columns:
    • The first column is fixed at 150px.
    • The second column uses flexible sizing (It will take the remaining available width space of the grid container). Example:
      • If the grid container is 200px wide, the second column is 50px wide.
      • If the grid container is 100px wide, the second column is 0px (any content in the column will overflow)
  • Rows:
    • The first row is fixed at 50px.
    • The second column is flexible
    • The third column sized to content
  • The only rows and columns that will grow or shrink are not set with a fix length or auto value.
  • This same properties can be used to give a name to a line
  • The grid layout is a content-based minimum sizing (ie the min-width and min-height are set to auto) and therefore it may lead to an overflow. See this dedicated page for a detailed explanation: How to solve a CSS grid overflow ?.

Line

grid lines can be referred to by:

  • their numerical index,
  • their name (Multiple lines with the same name establish a named set of grid lines)

The following code 23) names the lines in the grid with the sizing properties. (Some of the lines have multiple names)

#grid {
  display: grid;
  grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
  grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}

Grid Named Lines

Alignement / Space Distribution

The sized grid is aligned 24) 25) according to the grid container’s:

  • align-content
  • and justify-content properties.

Example:

  • Example 1:
    • the grid is centered vertically, and aligned to the right edge of its grid container
.grid {
  display: grid;
  grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
  justify-content: end;
  align-content: center;
}

gridgrid container

  • Example 2:
    • justifies all columns by distributing any extra space among them,
    • centers the grid in the grid container when it is smaller than 100vh.
main {
  grid: auto-flow 1fr / repeat(auto-fill, 5em);
  min-height: 100vh;
  justify-content: space-between;
  align-content: safe center;
}

Overflow

The content may overflow if the cells in a grid are Block|.

One solution is to set the cell to a grid display with an autoflow to row.

display: grid;
grid-auto-flow: row;

Span

By default, a grid item has a span of 1. 26)

Different spans can be given explicitly:

  • Starts in the 2nd row, spans 5 rows down (ending in the 7th row).
.three {
  grid-row: 2 / span 5;
}
  • Ends in the 7th row, spans 5 rows up (starting in the 2nd row).
.four {
  grid-row: span 5 / 7;
}
  • Span from line “first” to line “middle”.
.five {
  grid-column: first / middle;
}
  • Span between the 5th and 7th lines named “text”. (Multiple lines with the same name establish a named set of grid lines)
.six {
  grid-row: text 5 / text 7;
}

Media Query

This example 27) shows how it's possible to change the layout with different media query.

Grid Portrait Layout
@media (orientation: portrait) {
  #grid {
    display: grid;
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";
    ...
  }
}
Grid Landscape Layout
@media (orientation: landscape) {
#grid {
    display: grid;
    /* Different positions in the layout */
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";
    ...  
  }
}

Float

floating is ignored

Unit

Overflow

See How to solve a CSS grid overflow ?

Devtool visualization

The browser devtool have option to visualize the grid.

For instance, on chrome:

Devtool Chrome Layout Grid





Discover More
Flex Vs Grid Css
CSS - Layout Mode (Visual Formatting Model)

This page is the layout available in CSS. A layout system is an algorithm which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: In Css,...
HTML - Article Element

article is an element that represents a section of content that forms an independent part of a document or site; For example: a magazine a newspaper article, or a blog entry. This is a more...
Grid Form With Horizontal Vertical Alignment
How to solve a CSS grid overflow ?

This page will show and explain you why a overflow may happen in a css grid layout context. This simple example shows: a two columns grids that should have the same space because they get...
Auto Placed Form
How works CSS grid Auto-placement ?

In a grid, the value auto : will place the Css grid item into the next available empty grid cell (growing the grid if there’s no space left) is driven by the placement algorithm is controlled...



Share this page:
Follow us:
Task Runner