DEV Community

Cover image for CSS One Liners
Connor Dillon
Connor Dillon

Posted on • Edited on

1 1

CSS One Liners

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more