CSS code to achieve 10 modern layouts

Preface

I watched web.dev's 2020 three-day live at home on Sunday and found a lot of interesting things, one of which was about CSS. The host was Una Kravets (chrome team member). Although I haven't studied CSS in depth for several months, my previous foundation is still there (if you are interested, you can read the CSS stuff I posted a year ago, although not many people are willing to read it because it is too low-level, sad).

Note: Most of the following codes have been implemented by the latest major browsers. Remember not to use them in production. If you are a reader of the official account, due to external links, you can click to read the original text. There is a more detailed demo in the github page.

text

01. Super Center

Before flex and grid, vertical centering could not be achieved elegantly. Now, we can combine grid and place-items to elegantly achieve both horizontal and vertical centering .

<div class="parent blue" >
  <div class="box coral" contenteditable>
    :)
  </div>

.ex1 .parent {
    display: grid;
    place-items: center;
  } 

MDN, detailed explanation of the place-items attribute

Codepen address

02. The Deconstructed Pancake

flex: 0 1 <baseWidth>

This layout is often seen on e-commerce websites:

When the viewport is large enough, three boxes are placed horizontally with fixed widths.

When the viewport is not large (such as on mobile), the width is still fixed, but it is automatically deconstructed (forgive my Chinese level) and is not on the same level.

<div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>

.ex2 .parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ex2 .box {
    flex: 1 1 150px; /* flex-grow: 1, means automatically extending to the maximum width*/
    flex: 0 1 150px; /* No stretching: */
    margin: 5px;
  } 

When we set flex: 1 1 150px;

when:

Codepen address

03. Classic sidebar

grid-template-columns: minmax(<min>, <max>) ...

Also using grid layout, you can combine minmax() to achieve a flexible sidebar (this is useful when you want to adapt to large screens). minmax(<min>, <max>) is just what it says. Combined with the <flex> unit, this is very elegant and avoids inflexible methods such as mathematical calculations of width (such as when we set the gap).

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

.ex3 .parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
  } 

Codepen address

04. Fixed header and footer

grid-template-rows: auto 1fr auto

A header and footer with a fixed height and a body that takes up the remaining space is a frequently used layout, which we can perfectly implement using grid and fr units.

<div class="parent">
    <header class="blue section" contenteditable>Header</header>
    <main class="coral section" contenteditable>Main</main>
    <footer class="purple section" contenteditable>Footer Content</footer>
  </div>

.ex4 .parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
  } 

Codepen address

05. Classical Holy Grail layout

grid-template: auto 1fr auto / auto 1fr auto

We can easily use Grid layout to achieve the holy grail layout, and it is flexible.

<div class="parent">
    <header class="pink section">Header</header>
    <div class="left-side blue section" contenteditable>Left Sidebar</div>
    <main class="section coral" contenteditable> Main Content</main>
    <div class="right-side yellow section" contenteditable>Right Sidebar</div>
    <footer class="green section">Footer</footer>
  </div>

.ex5 .parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
  }
  
  .ex5 header {
    padding: 2rem;
    grid-column: 1 / 4;
  }

  .ex5 .left-side {
    grid-column: 1 / 2;
  }

  .ex5 main {
    grid-column: 2 / 3;
  }

  .ex5 .right-side {
    grid-column: 3 / 4;
  }

  .ex5 footer {
    grid-column: 1 / 4;
  } 

Codepen address

06. Interesting stacking blocks

Using grid-template-columns and grid-column you can achieve the layout shown in the following figure. This further illustrates the convenience of repeat and fr .

Codepen address

07. RAM Tips

grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

Una Kravets calls this the repeat, auto, minmax technique. This is very useful in flexible layout images/boxes (the number of cards that can be placed in a row automatically adapts).

.ex7 .parent {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

<div class="parent white">
    <div class="box pink">1</div>
    <div class="box purple">2</div>
    <div class="box blue">3</div>
    <div class="box green">4</div>
  </div>

The effect is that if the minimum width of multiple boxes can be met (such as 150px above), it will automatically adapt and be placed on multiple lines. For example:

• The current width is 160px (not considering the gap), so the width of the four box above will adapt to 160px and be divided into 4 rows.
• The current width is 310px (not considering the gap), the four box above are divided into two rows, and the two box share the width equally
• When three boxes can be placed in one row, the third box automatically moves to the first row.
• When the number of boxes in a row is sufficient, the fourth box automatically moves to the first row.

If we change auto-fit to auto-fill :

08. Card elasticity and adaptability

justify-content: space-between , combined with grid and flex to achieve a perfect card layout.

<div class="parent white">
    <div class="card yellow">
      <h3>Title - Card 1</h3>
      <p contenteditable>Medium length description with a few more words here.</p>
      <div class="visual pink"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 2</h3>
      <p contenteditable>Long Description. I am very happy to see you.</p>
      <div class="visual blue"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 3</h3>
      <p contenteditable>Short Description.</p>
      <div class="visual green"></div>
    </div>
  </div>

.ex8 .parent {
    height: auto;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .ex8 .visual {
    height: 100px;
    width: 100%;
  }

  .ex8 .card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: space-between;
  }

  .ex8 h3 {
    margin: 0
  } 

Whether the width or height is shrunk or extended, the layout of the card can be perfectly displayed.

Codepen address

09. Use clamp to implement fluid typography

clamp(<min>, <actual>, <max>)

Fluid typography can be implemented in one line using the new clamp() method. Improves UX, very suitable for cards containing reading content, because we don’t want a line of text to be too short or too long.

<div class="parent white">
    <div class="card purple">
      <h1>Title Here</h1>
      <div class="visual yellow"></div>
      <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
    </div>
  </div>

.ex9 .parent {
    display: grid;
    place-items: center;
  }

  .ex9 .card {
    width: clamp(23ch, 50%, 46ch);
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  .ex9 .visual {
      height: 125px;
      width: 100%;
    } 

MDN, clamp() explained

10. Perfect Proportion

aspect-ratio: <width> / <height>

When displaying CMS or other design content, we expect pictures, videos, and cards to be laid out in a fixed proportion. The latest aspect-ratio can achieve this function elegantly (using Chrome 84+)

<div class="parent white">
    <div class="card blue">
      <h1>Video Title</h1>
      <div class="visual green"></div>
      <p>Descriptive Text. This demo works in Chromium 84+.</p>
    </div>
  </div>

.ex10 .parent {
    display: grid;
    place-items: center;
  }

  .ex10 .visual {
    aspect-ratio: 16 / 9;
  }

  .ex10 .card {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
  } 

Codepen address