How to achieve 10 modern layouts with one line of CSS?

This article highlights some powerful CSS snippets that can do some of the heavy layout programming and help you build powerful new CSS layouts.

Here we introduce 10 new CSS layout and sizing techniques that highlight the power and impact of a single line of CSS style code. If you use Grid/Flexbox in your own projects, these 10 one-line CSS layouts will be useful.

Front knowledge

Flexbox layout

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

The grid layout

In a container

The grid-template-columns attribute defines the column width of each column. The grid-template-rows attribute defines the row height of each row

Repeat () simplifies repeating values as follows:

  grid-template-columns: 33.33% 33.33% 33.33%;
  
  /** is equivalent to **/

  grid-template-columns: repeat(3.33.33%);
Copy the code

Repeat () takes two arguments, the first being the number of repetitions (3 in the previous example) and the second being the value to be repeated.

It is also ok to repeat() a pattern.

/* Defines six columns, with the first and fourth columns 100px wide, the second and fifth columns 20px, and the third and sixth columns 80px*/
grid-template-columns: repeat(2.100px 20px 80px);
Copy the code

Auto – the fill and auto – fit

The auto-fill cell size is fixed, but the container size is uncertain. If you want each row (or column) to contain as many cells as possible, you can use the auto-fill keyword to indicate auto-fill.

grid-template-columns: repeat(auto-fill, 100px);
Copy the code

Fr is proportional,

/* Two columns of the same width */
grid-template-columns: 1fr 1fr;
/* The width of the first column is 150 pixels, and the width of the second column is half that of the third column */
grid-template-columns: 150px 1fr 2fr;
Copy the code

The minmax() function produces a length range that indicates that the length is within that range. It takes two parameters, a minimum and a maximum.

/* Indicates that the column width is not less than 100px and not more than 1fr*/
grid-template-columns: 1fr 1fr minmax(100px.1fr);
Copy the code

Auto browser determines its own width

grid-template-columns: 100px auto 100px;
Copy the code

Function on “item”

The place-items property is a combination of the align-items property and the context-items property.

Span means “span”, which is how many grids span between the left and right (top and bottom) borders

/* The left border of the project spans 2 grids from the right border */
grid-column-start: span 2;
grid-column-end: span 2;

.item-1 {
  background: #b03532;
  /*1~3 grids */
  grid-column: 1 / 3; 
  grid-row: 1 / 3;
}
/* is the same as */
.item-1 {
  background: #b03532;
  /* start with 1 and span 2 grids */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
Copy the code

Learn more about Grid layout in the CSS Grid Layout tutorial

One-line CSS modern layout

1. “Super Centered”

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

Copy the code

  .parent {
    display: grid;
    /* Equivalent to both align-items and context-items being set to center*/
    place-items: center;
  }
Copy the code

2. The Deconstructed adaptive layout

There’s a bit of a primer on Flex.

 <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

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

  .box {
    flex: 1 1 150px; /* Stretching: */
    flex: 0 1 150px; /* No stretching: */
    margin: 5px;
  }
Copy the code

3. Classic sidebar

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 (,) is literal. The combination of units is very elegant and avoids mathematically inflexible methods 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

.parent {
    display: grid; / In two columns, the smallest one150px, the maximum proportion25%, an adaptive */ grid-template-columns: minmax(150px.25%) 1fr;
  }
Copy the code

4. Fix headers and footers

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

  .parent {
    display: grid;
    /* split three lines, 1,3 auto, 2 adaptive */
    grid-template-rows: auto 1fr auto;
  }
Copy the code

5. Classic Grail Layout (Classic Grail layout)

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

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

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

  main {
    grid-column: 2 / 3;
  }

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

  footer {
    grid-column: 1 / 4;
  }
Copy the code

6. Interesting stacking

<div class="parent white">
    <div class="span-12 green section">Span 12</div>
    <div class="span-6 coral section">Span 6</div>
    <div class="span-4 blue section">Span 4</div>
    <div class="span-2 yellow section">Span 2</div>
  </div>
  
Copy the code

.parent {
    display: grid;
    grid-template-columns: repeat(12.1fr);
  }
  
  .span-12 {
    grid-column: 1 / span 12;
  }

  .span-6 {
    grid-column: 1 / span 6;
  }

  .span-4 {
    grid-column: 4 / span 4;
  }

  .span-2 {
    grid-column: 3 / span 2;
  }

  /* centering text */
  .section {
    display: grid;
    place-items: center;
    text-align: center
  }
Copy the code

You can use this repeat() feature to quickly write a grid in CSS. Using: repeat(12, 1FR) for grid templates will provide you with 12 columns 1FR

Use the span keyword. You can set the starting line and then set the number of columns to span from that starting point. In this case grid-column: 1 / span 12 would be equivalent to grid-column: 1/13 and grid-column: 2 / span 6 would be equivalent to grid-column: 2/8

7. RAM skills

RAM, ` repeat, auto – (fit | the fill) and minmax () three shorthand, the elastic layout pictures/box such useful (one line can discharge automatically ADAPTS to the number of CARDS).

<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

.parent {
    display: grid;
    grid-gap: 1rem;
    Core / * * /
    grid-template-columns: repeat(auto-fit, minmax(150px.1fr));
  }
Copy the code

The current width is 160px (not counting the gap), so the four boxes above will have an adaptive width of 160px and will be divided into four rows

The current width is 310px (regardless of the gap). The four boxes are split into two rows, and the two boxes split evenly. When a row is filled with three boxes, the third box automatically moves to the first row

8, the card elastic adaptation

<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

 .parent {
    height: auto;
    display: grid;
    grid-gap: 1rem;
   Core / * * /
    grid-template-columns: repeat(3.1fr);
  }

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

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

  h3 {
    margin: 0
  }
Copy the code

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

9. Use clamp to achieve fluid typography

<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

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

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

  .visual {
      height: 125px;
      width: 100%;
    }
  
Copy the code

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.

10. Perfect proportion

The aspect-ratio property, when I adjust the size of the card, the green visual block will maintain this 16 x 9 aspect ratio. The aspect ratio is fixed at 16/9 due to the aspect-ratio property.

  <div class="parent white">
    <div class="card blue">
      <h1>Video Title</h1>
      <div class="visual green"></div>
      <p>Descriptive text for aspect ratio card demo.</p>
    </div>
  </div>
Copy the code

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

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

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

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+)

The resources

Ten Modern layouts in one line of CSS Grid