A collection of CSS layouts created by a single line of code.
1. Definitely Always Centered
place-items: center
.parent {
display: grid;
place-items: center;
background: lightblue;
width: 500px;
height: 500px;
resize: both;
overflow: auto;
}
.child {
padding: 0.5rem;
border-radius: 10px;
border: 1px solid red;
background: lightpink;
font-size: 2rem;
text-align: center;
}
body {
font-family: system-ui, serif;
}
<div class="parent">
<div class="child" contenteditable>Hello World</div>
</div>
2. The Deconstructed Pancake
flex: 0 1 <baseWidth>
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.child {
/* flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] */
/* If we don't want the items to stretch: */
flex: 0 1 300px;
/* If we do want the items to stretch: */
flex: 1 1 300px;
/* etc. */
border: 1px solid red;
background: lightpink;
font-size: 2rem;
text-align: center;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
3. Sidebar Says
grid-template-columns: minmax(<min>, <max>) ...
This will create 2 columns: the first will take up at least 150px or at most 25% of view width, and the second element will occupy the second grid position (1fr), meaning it takes up the rest of the remaining space.
body {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
padding: 0;
margin: 0;
}
.sidebar {
height: 100vh;
/* etc. */
background: lightpink;
font-size: 2rem;
text-align: center;
}
.content {
padding: 2rem;
}
<div class="sidebar" contenteditable>
Min: 150px
<br />
Max: 25%
</div>
<p class="content" contenteditable>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi
quibusdam porro?
</p>
4. Pancake Stack
grid-template-rows: auto 1fr auto
Allocates as much vertical space as needed to header and footer, and allocates the remainder to the main content (middle section).
body {
display: grid;
height: 100vh;
grid-template-rows: auto 1fr auto;
}
header {
background: lightpink;
padding: 2rem;
}
main {
background: coral;
}
footer {
background: wheat;
padding: 2rem;
text-align: center;
}
<header>
<h1>Header.com</h1>
</header>
<main>Main Content</main>
<footer>Footer Content — Header.com 2020</footer>
5. Classic Holy Grail Layout
grid-template: auto 1fr auto / auto 1fr auto
body {
display: grid;
height: 100vh;
grid-template: auto 1fr auto / auto 1fr auto;
}
header {
background: lightpink;
padding: 2rem;
grid-column: 1 / 4;
}
.left-sidebar {
background: lightblue;
grid-column: 1 / 2;
}
main {
background: coral;
grid-column: 2 / 3;
}
.right-sidebar {
background: yellow;
grid-column: 3 / 4;
}
footer {
background: wheat;
padding: 2rem;
text-align: center;
grid-column: 1 / 4;
}
.left-sidebar,
.right-sidebar {
padding: 1rem;
}
<header>
<h1 contenteditable>Header.com</h1>
</header>
<div class="left-sidebar" contenteditable>
Left Sidebar
</div>
<main contenteditable>
Main Content
</main>
<div class="right-sidebar" contenteditable>
Right Sidebar
</div>
<footer contenteditable>
Footer Content — Header.com 2020
</footer>
6. 12-Span Grid
grid-template-columns: repeat(12, 1fr)
body {
display: grid;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
grid-gap: 1rem;
}
div {
display: grid;
place-items: center;
}
.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;
}
<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>
7. RAM (Repeat, Auto, Minmax)
grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
body {
display: grid;
height: 100vh;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
div {
display: grid;
place-items: center;
background: lightpink;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
8. Line Up as Deck of Cards
justify-content: space-between
body {
height: auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
padding: 1rem;
font-family: system-ui, sans-serif;
}
.visual {
height: 100px;
width: 100%;
background: wheat;
margin: 0.5rem 0;
}
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: lightpink;
padding: 1rem;
}
h1 {
font-size: 1.5rem;
}
h3 {
margin: 0;
}
<div class="parent white">
<div class="card yellow">
<h3>
Title - Card 1
</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, perferendis!</p>
<div class="visual pink"></div>
</div>
<div class="card yellow">
<h3>Title - Card 2</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo consequuntur aperiam quibusdam nulla placeat nobis vero porro id dolorem libero.</p>
<div class="visual blue"></div>
</div>
<div class="card yellow">
<h3>Title - Card 3</h3>
<p>Lorem ipsum dolor sit amet.</p>
<div class="visual greeen"></div>
</div>
</div>
9. Clamping My Style
clamp(<min>, <actual>, <max>)
body {
display: grid;
place-content: center;
height: 100vh;
font-family: system-ui, sans-serif;
}
.card {
width: clamp(23ch, 50vw, 46ch); /* Card wants to be at 50% width, but if it's larger than 46 characters it will stop growing, and if it's smaller than 23 characters it will stop shrinking. */
display: flex;
flex-direction: column;
background: lightpink;
padding: 1rem;
}
.visual {
height: 100px;
width: 100%;
background: wheat;
margin: 0.5rem 0;
}
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
9.5 Font Clamping
.example .parent {
display: grid;
place-items: center;
}
.example .card {
font-size: clamp(1.5rem, 10vw, 3rem);
display: flex;
flex-direction: column;
padding: 1rem;
}
10. Respect the Aspect
aspect-ratio: <width> / <height>
body {
display: grid;
place-items: center;
height: 100vh;
}
.visual {
aspect-ratio: 16/9;
background: wheat;
margin: 0.5rem 0;
}
.card {
width: 80%;
display: flex;
flex-direction: column;
background: lightpink;
padding: 1rem;
}
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
Disclaimer
This write-up was arranged from a talk given by Una Kravets, available here.
Top comments (2)
Your link to 1linelayouts directs to: 1linelayouts.glitch.me/ which is not a valid address. You should remove the www.
Thanks for writing this up
Fixed, thank you!