Ten Modern Layouts🚀 [Part 2]

#4 Pancake Stack: grid-template-rows: auto 1fr auto

This layout is often used for websites and apps.

HTML


<div class="parent">
      <header class="blue section" contenteditable>Header</header>
      <main class="coral section" contenteditable>Main</main>
      <footer class="purple section" contenteditable>Footer</footer>
</div>

CSS


 .parent {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}
header {
  background: rgb(235, 108, 127);
  padding: 2rem;
  text-align: center;
}

main {
  background: lightgreen;
  padding: 2rem;
  text-align: center;
}

footer {
  background: rgb(14, 202, 202);
  padding: 2rem;
  text-align: center;
}

#5 Classic Holy Grail Layout: grid-template: auto 1fr auto / auto 1fr auto

It is similar to the previous layout, but now with sidebars

HTML


 <header class="pink section">Header</header>
      <div class="left-side blue section" contenteditable>Left Sidebar</div>
      <main class="section coral" contenteditable>Main</main>
      <div class="right-side yellow section" contenteditable>Right Sidebar</div>
      <footer class="green section">Footer</footer>

CSS


.parent {
  display: grid;
  height: 100vh;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  background: plum;
  grid-column: 1 / 4;
}

.left-side {
  padding: 2rem;
  background: purple;
  grid-column: 1 / 2;
}

main {
  padding: 2rem;
  background: paleturquoise;
  grid-column: 2 / 3;
}

.right-side {
  padding: 2rem;
  background: papayawhip;
  grid-column: 3 / 4;
}

footer {
  padding: 2rem;
  background: palegreen;
  grid-column: 1 / 4;
}

#6 12-Span Grid: grid-template-columns: repeat(12, 1fr)

The next item on our list is a timeless favourite: the 12-column grid. You can easily create grids in CSS using the repeat() function. By specifying repeat(12, 1fr) as the grid template columns, you'll get 12 equal-width columns each taking up 1 fraction unit of the available space.

HTML


 <div class="parent">
      <div class="span-12">Span 12</div>
      <div class="span-6">Span 6</div>
      <div class="span-4">Span 4</div>
      <div class="span-2">Span 2</div>
    </div>

CSS


.parent {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
}
.span-12 {
  background: lightpink;
  grid-column: 1 / 13;
}

.span-6 {
  background: lightblue;
  grid-column: 1 / 7;
}

.span-4 {
  background: coral;
  grid-column: 4 / 9;
}

.span-2 {
  background: yellow;
  grid-column: 3 / 5;
}