CSS One Liners
Tags: css, webdev
Published: 2020-07-30 21:12:49

A collection of CSS layouts created by a single line of code.

<!-- TOC -->

- [CSS One Liners](#css-one-liners)
  - [Definitely Always Centered](#definitely-always-centered)
  - [The Deconstructed Pancake](#the-deconstructed-pancake)
  - [Sidebar Says](#sidebar-says)
  - [Pancake Stack](#pancake-stack)
  - [Classic Holy Grail Layout](#classic-holy-grail-layout)
  - [12-Span Grid](#12-span-grid)
  - [RAM Repeat, Auto, Minmax](#ram-repeat-auto-minmax)
  - [Line Up as Deck of Cards](#line-up-as-deck-of-cards)
  - [Clamping My Style](#clamping-my-style)
  - [Font Clamping](#font-clamping)
  - [Respect the Aspect](#respect-the-aspect)

<!-- /TOC -->

## 1. Definitely Always Centered

> `place-items: center`

```css
.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;
}
```

```html
<div class="parent">
  <div class="child" contenteditable>Hello World</div>
</div>
```

## 2. The Deconstructed Pancake

> `flex: 0 1 <baseWidth>`

```css
.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;
}
```

```html
<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.

```css
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;
}
```

```html
<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).

```css
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;
}
```

```html
<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`

```css
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;
}
```

```html
<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)`

```css
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;
}
```

```html
<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))`

```css
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;
}
```

```html
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
```

## 8. Line Up as Deck of Cards

> `justify-content: space-between`

```css
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;
}
```

```html
<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>)`

```css
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;
}
```

```html
<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

```css
.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>`

```css
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;
}
```

```html
<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](https://www.youtube.com/watch?v=qm0IfG1GyZU).

####  References: 
> 
> [10 Modern Layouts in 1 Line of CSS](https://www.youtube.com/watch?v=qm0IfG1GyZU)