Fluid grid

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

Rows and columns with relative sizes (%, fr, auto ...).
Ideal for layouts that require adaptability across different devices and resolutions.

Example

In this example, we use grid-template-columns to define the number of columns and their respective widths, but this time they are proportional widths relative to the container’s width. For example, the first column takes 50% of the container and the other two share the remaining width based on their fr values.

With gap, we set the spacing of rows and columns at the same time.

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;
  display: grid;
  gap: 1rem;
  grid-template-columns: 50% 1fr 2fr;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 50% 1fr 2fr;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

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