DEV Community

Cover image for CSS One Liners
Connor Dillon
Connor Dillon

Posted on • Edited on

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

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!

Read next

shams_arman_510 profile image

BLA ! BLA! BLA! DECEMBER...!

shams Arman siddique -

cryptosandy profile image

From Web2 to Web3: A Developer’s Guide to the Shift

Crypto.Andy (DEV) -

blamsa0mine profile image

How to Create a Dynamic Popover with CSS and JavaScript 🚀

A0mineTV -

bitbyprogress profile image

Diving Back into React: A Software Engineer’s Learning Journey

Progress Eze -