Skip to main content

Grid: Creating grid designs

Grid: creating grid designs

Grid Layout​

The CSS Grid Layout module offers a grid-based layout system with rows and columns, simplifying web page design without the need for floats or positioners. All direct children of the grid container are automatically converted into grid elements.

CSS
.container {
  display: grid | inline-grid;
}
Grid Layout

Grid Columns​

The vertical lines of the grid elements are called columns.

Grid Columns

Grid Rows​

The horizontal lines of the grid elements are called rows.

Grid Row

Grid Gaps​

The spaces between each column/row are called gaps.

Grid gap

You can adjust the size of the gaps using one of the following properties:

  • column-gap
  • row-gap
  • gap

Examples​

The column-gap property sets the space between columns:

CSS
.grid-container {
  mostrar: rejilla;
  espacio-columna: 50px;
}

The row-gap property sets the space between rows:

CSS
.grid-container {
  display: grid;
  row-gap: 50px;
}

The gap property is a shorthand for the row-gap and column-gap properties:

CSS
.grid-container {
  display: grid;
  gap: 50px 100px;
}

The gap property can also be used to set both the row spacing and column spacing to a single value:

CSS
.grid-container {
  display: grid;
  gap: 50px;
}
Resources