DEV Community

Cover image for CSS One Liners
Connor Dillon
Connor Dillon

Posted on • Edited on

1 1

CSS One Liners

#css #webdev

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;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="parent">
  <div class="child" contenteditable>Hello World</div>
</div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<header>
  <h1>Header.com</h1>
</header>
<main>Main Content</main>
<footer>Footer Content — Header.com 2020</footer>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

Disclaimer

This write-up was arranged from a talk given by Una Kravets, available here.

References:

10 Modern Layouts in 1 Line of CSS

profile
Datadog
 Promoted

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (2)

Collapse
 
frsr profile image
Fraser Embrey •

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

Collapse
 
connoro7 profile image
Connor Dillon •

Fixed, thank you!

profile
Cloudinary
 Promoted

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

Read next

parzival_computer profile image

Custom Validators in Spring Data

Parzival -

balajisasikumar profile image

🎨 Mastering Angular-React Integration: How to Use tldraw Without Losing Your Mind!

Balaji Sasikumar -

empiree profile image

Top 5 Popular Frameworks and Libraries for Go in 2025

Oleg Dubovoi -

ingosteinke profile image

Accessible, sustainable, and creative web development

Ingo Steinke, web developer -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay