How do YOU implement 10 modern layouts with one line of CSS?

Mom, I Can’t Learn Anymore ) is a series of articles on current events in the field of computer programming (with a bias toward the front end), in which practices and developments in the field are discussed from different perspectives.

preface

Updated at 2020/7/12, Una Kravets recently launched her web.dev blog about video layouts. For those interested, check out One Line layouts

On Sunday I watched Web. dev’s three-day Live 2020 at home and found some interesting things. One of them was about CSS, hosted by Una Kravets (chrome Team member). I haven’t delved into CSS in a few months, but the basics are still there (if you’re interested, check out my CSS post a year ago, although it’s too low-level for anyone to read, SAD).

Note: Most of the code below has been implemented by major new browsers, so do not use it in Production

Note: All the code in this article comes from Una Kravets. Network is better, you can see Una Kravets for web.dev dedicated to the website, which has all the demo -1linelayouts

The body of the

01. Super center

Before Flex and The Grid, vertical centering was not an elegant implementation. Now we can combine grid and place-items to achieve horizontal and vertical centering in an elegant way.

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

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

Description of MDN, place-items attributes

The codepen address of Una Kravets

02. The Deconstructed Adaptive layout

flex: 0 1 <baseWidth>

This layout is often found on e-commerce sites:

1. When viewport is sufficient, the three boxes are placed horizontally with a fixed width
2. In cases where viewport is insufficient (like on Mobile), the width is still fixed, but the auto-deconstruction (forgive my Chinese) is not at 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>
Copy the code

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

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

flex: 1 1 150px;

The codepen address of Una Kravets

03. Classic Sidebar

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

Also using Grid Layout, you can combine minmax() to implement flexible sidebar (which is useful when you need to adapt to a larger screen). Minmax (

, < Max >) is literal. The combination of < Flex > units is very elegant and avoids mathematical manipulation such as width (like when we set gaps).

  <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>
Copy the code

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

The codepen address of Una Kravets

04. Fix headers and footers

grid-template-rows: auto 1fr auto

Headers and footers of fixed height, and bodies that take up the rest of the space are commonly used layouts that we can implement perfectly with 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>
Copy the code

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

The codepen address of Una Kravets

05. The Classical Holy Grail Layout

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

The Holy Grail layout can be easily implemented using the Grid layout and is elastic.

  <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>
Copy the code

  .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;
  }
Copy the code

The codepen address of Una Kravets

06. Interesting stacking

Grid-template-columns and grid-column can be used to achieve the layout shown in the figure below. This further illustrates the convenience of repeat and FR.

The codepen address of Una Kravets

07. RAM skills

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

Una Kravets calls it the repeat, Auto, Minmax technique. This is useful for things like elastic 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));
  }
Copy the code

  <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>
Copy the code

The effect is that if the minimum width of multiple boxes can be met (such as 150px above), it automatically flexibly fits into multiple rows. Here’s an example:

1. The current width is160px(Not considering gap), then the top fourboxThe width of is adaptive to160pxAnd divided into 4 lines
2. The current width is310px(not counting gap), the top fourboxTwo lines, two linesboxDivide the width
3. When there are three boxes in a row, the third box automatically goes to the first row
4. When a row is filled with four boxes, the fourth box automatically goes to the first row

If we change auto-fit to auto-fill:

The codepen address of Una Kravets

08. Card elasticity adaptive

Context-content: space-between, combined with Grid and Flex for 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. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</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>
Copy the code

  .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
  }
Copy the code

Whether the width or height of the contraction or extension, can perfectly show the layout of the card.

The codepen address of Una Kravets

09. Use clamp to realize fluid typography

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

Fluid typography can be implemented in one line using the latest clamp() method. Improve UX, great for cards that contain reading content, because we don’t want a line 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>
Copy the code

  .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%;
    }
  
Copy the code

• MDN, clamp (), rounding
• The codepen address of Una Kravets

10. Perfect proportions

aspect-ratio: <width> / <height>

When presenting a CMS or other design content, we expect images, videos, cards to be laid out to a fixed scale. The latest aspect-Ratio does this elegantly (use 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>
Copy the code

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

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

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

The codepen address of Una Kravets

---

I’m BY, an interesting person who will bring more original articles in the future.

This article is subject to MIT protocol. Please contact the author for republication.

Interested can follow the public account (Baixue Principle) or Star GitHub repo.