This is the second part of the "Ten Modern Layouts"
If you aren't read the part 1, here you can read it.
#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;
}
Top comments (0)