grid-template-areas

Allows defining layouts using semantic names for different grid zones.

The container uses grid-template-areas.
Each item is assigned with grid-area: name.

Example

With grid-template-areas we define a layout of 3 rows and 3 columns where each cell has a semantic name, and each item is placed with grid-area. Change the arrangement: the HTML stays the same, only the template changes.

Select arrangement:

left | center | rightright | center | leftstacked

ResultLiveContainer width100%

html

<div class="container">
  <div class="header">header</div>
  <div class="body-left">left</div>
  <div class="body-center">center</div>
  <div class="body-right">right</div>
  <div class="footer">footer</div>
</div>

<div class="container">
  <div class="header">header</div>
  <div class="body-left">left</div>
  <div class="body-center">center</div>
  <div class="body-right">right</div>
  <div class="footer">footer</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "header header header"
    "body-left body-center body-right"
    "footer footer footer";
  grid-template-columns: 75px 1fr 75px;
  grid-template-rows: 2fr 4rem 1fr;
  height: 12rem;
  padding: 0.5rem;
}

.header {
  grid-area: header;
}

.body-left {
  grid-area: body-left;
}

.body-center {
  grid-area: body-center;
}

.body-right {
  grid-area: body-right;
}

.footer {
  grid-area: footer;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "header header header"
    "body-left body-center body-right"
    "footer footer footer";
  grid-template-columns: 75px 1fr 75px;
  grid-template-rows: 2fr 4rem 1fr;
  height: 12rem;
  padding: 0.5rem;
}

.header {
  grid-area: header;
}

.body-left {
  grid-area: body-left;
}

.body-center {
  grid-area: body-center;
}

.body-right {
  grid-area: body-right;
}

.footer {
  grid-area: footer;
}

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