Fixed grid

This is a layout system where the page or interface is organized using a grid with predefined column widths that do not adapt to screen size.

Rows and columns with fixed sizes (em, px, rem ...).
Ideal for highly controlled layouts where content and size are predictable.

Example

In this example we have 2 rows and a maximum of 3 columns. When a fourth element is added, it automatically goes to the next row. With grid-template-rows we define the number of rows and their height, while with grid-template-columns we define the number of columns and their width.

Additionally, with row-gap we control the spacing between rows, and with column-gap the spacing between columns.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  column-gap: 0.5rem;
  display: grid;
  grid-template-columns: 100px 4rem 50px;
  grid-template-rows: 60px 6rem;
  row-gap: 1rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  column-gap: 0.5rem;
  display: grid;
  grid-template-columns: 100px 4rem 50px;
  grid-template-rows: 60px 6rem;
  row-gap: 1rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.