An incomplete guide to the creative layout of the new era

I vaguely remember that the relevant description of the Cantonese college entrance examination composition in a certain year-"Sometimes, common sense is easy to know but difficult to do, sometimes, common sense must be updated and new." People's imagination and creativity can easily be weakened in the consistent cognition of common sense.

CSS updates so fast that I can only continue to urge myself to continue learning, staying in my comfort zone all the time, it is easy to fail to keep up with the rhythm. Of course, this sentence can be applied not only to CSS, but also to any technology and any industry.

Return to the theme of this article-the layout of the new era. Using the existing CSS technology, can we boldly jump out of conventional thinking, no longer confine ourselves to rectangular frames one by one, and try to be more artistic?

Like the following ones.

Eclectic lines:

The text is arranged along the edge of the picture:

No longer horizontal and vertical:

Or a weird grid:

Isn’t it interesting? The eclectic layout can attract more attention and traffic to the page. Of course, this also requires me to have a good grasp of CSS to create more different possibilities in the limited attributes.

grid layout

Speaking of new era layout and creative layout, we have to mention the layout of Grid.

The two-dimensional characteristics of the CSS Grid layout give us more control over the page than the traditional float layout, positioning layout, and flex layout.

Use Grid layout to cut the page into blocks

Here, we use the characteristics of the Grid layout to cut the page into different block-shaped areas arbitrarily as we want.

Here are some tools that can facilitate our grid layout:

• Fast Grid Layout-Grid Layoutit

With this tool, you can quickly create and get the Grid layout you want, and get the corresponding CSS, which is very simple and convenient.

Here I use tools to cut the page into 6 areas of A, B, C, D, E, and F:

Copy the HTML and CSS on the right to quickly get such a layout. I copied the code to CodePen and simply added the background color. Then we can do anything based on this layout:

CodePen Demo -- Grid Layout Demo

Use Grid layout and clip-path to achieve GTA5 cover

Here, we can use the Grid layout and clip-path to implement the GTA5 cover, like this:

We divide a 4x4 grid into 9 different parts:

Then use clip-path, according to the shape of the cover picture, to cut each piece of Gird item twice:

ok, finally replace the color block inside with a specific picture:

CodePen Demo -- GTA 5 poster ( Grid and Clip Path)

Of course, there is a slot here. In the end, 9 pictures were used, so why not just use one picture in the first place? :)

Grid is a very good helper in the process of complex layout. It is very suitable for the layout of various irregular grid blocks. Here is another DEMO:

The author is Olivia Ng , the link to the Demo - CodePen Demo - CSS Grid: Train Ticket

Waterfall flow layout

The waterfall flow layout is also very common in modern layouts, and is usually used in some photo walls. Like this:

Before, without the help of JavaScript, we have 3 pure CSS ways to achieve the pseudo-waterfall layout (note that this is a pseudo-waterfall), which are:

• uses CSS column to implement waterfall flow layout
• Use CSS flex to implement waterfall flow layout
• uses CSS grid to implement waterfall flow layout

You can click into the Demo to have a look. The disadvantages of the waterfall flow layout implemented by the above three methods are more obvious:

• For flex and column layouts, only vertical waterfall layout can be achieved, the first column is filled with the second column, and so on
• For the grid layout, the disadvantage is that it cannot automatically adapt to different heights, and you need to manually specify the size of each element block

In the future, the standard implements grid-template-rows: masonry based on the Grid layout. Using this standard, we can quickly use the Grid to implement a horizontal waterfall layout. At present, you can experience this feature in Firefox.

Use grid-template-rows: masonry realize the horizontally arranged waterfall flow layout

grid-template-rows: masonry is a way to quickly create waterfall flow layout based on grid layout that Firefox started to support in Firefox 87. And firefox has been pushing this attribute into the standard.

Starting from firefox 87, enter about:config web address bar of the browser and enable layout.css.grid-template-masonry-value.enabled configure and use. Can i use - grid-template-rows: masonry

Normally, we still need to spend a certain amount of effort to realize the waterfall flow layout, even if it is based on the grid layout. Before, we used the grid layout to finely control each grid item to achieve the vertical waterfall flow layout:

<div class="g-container">
  <div class="g-item">1</div>
  <div class="g-item">2</div>
  <div class="g-item">3</div>
  <div class="g-item">4</div>
  <div class="g-item">5</div>
  <div class="g-item">6</div>
  <div class="g-item">7</div>
  <div class="g-item">8</div>
</div>

.g-container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.g-item {
    &:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    &:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / 4;
    }
    &:nth-child(3) {
        grid-column: 3;
        grid-row: 1 / 5;
    }
    &:nth-child(4) {
        grid-column: 4;
        grid-row: 1 / 6;
    }
    &:nth-child(5) {
        grid-column: 1;
        grid-row: 3 / 9;
    }
    &:nth-child(6) {
        grid-column: 2;
        grid-row: 4 / 9;
    }
    &:nth-child(7) {
        grid-column: 3;
        grid-row: 5 / 9;
    }
    &:nth-child(8) {
        grid-column: 4;
        grid-row: 6 / 9;
    }
}

The effect is as follows:

CodePen Demo - CSS Grid to achieve pseudo waterfall flow layout

In the above Demo, use grid-template-columns and grid-template-rows divide the ranks, and use grid-row control grid item . However, the cost of doing so is too high. With more elements, the amount of calculation is also very large, and we still know in advance Under the premise of the height and width of each element.

With grid-template-rows: masonry , everything will become much simpler. For a 4-column grid layout where the height of each element is uncertain:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Normally, what you see is this:

grid-template-rows: masonry to the container to indicate that the waterfall flow layout is adopted in the vertical direction:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: masonry;
}

You can easily get such a waterfall flow layout that arranges elements in a horizontal direction:

If you are using firefox and the layout.css.grid-template-masonry-value.enabled configuration is turned on, you can poke into the demo below to get a feel:

CodePen Demo - grid-template-rows: masonry implements waterfall flow layout

Multi-column layout

Multi-column layout is also one of the layouts that we can control now, using the relatively new feature of CSS Multiple-column Layout Properties .

The simplest multi-column layout, we only need to use column-count or column-width .

Suppose we have the following HTML:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

Simple 3-column layout:

p {
    width: 800px;
    column-count: 3;
    font-size: 16px;
    line-height: 2;
}

Specify 3 columns with column-count: 3

column-gap control spacing & column-rule control column and column style

Next, let’s learn about column-gap and column-rule

• column-gap: Control the interval between columns, the default is the keyword normal , and the value is 1em
• column-rule: controls the style rules between columns, and its writing is border , specifying the decorative line between columns

Still the following HTML:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

Simple 3-column layout:

p {
    width: 800px;
    column-count: 3;
    font-size: 16px;
    line-height: 2;
+   column: 1px solid #999;
+   column-gap: 2em;
}

CodePen Demo -- CSS multi column Layout Demo

column-span set span

Then, there is a very interesting attribute column-span , which is used to set the cross-column display of the element.

We first use the multi-column layout to achieve such a layout style similar to newspaper typesetting.

<div class="g-container">
    <p>Lorem ipsum dolor sit amet ... </p>
    <h2>Title Lorem ipsum dolor sit amet consectetur adipisicing elit title</h2>
    <p>Lorem ipsum dolor sit amet ... </p>
</div>

.g-container {
    width: 800px;
    column-count: 3;
    column-rule: 1px solid #aaa;
    column-gap: 2em;
}

h2 {
    margin: 14px 0;
    font-size: 24px;
    line-height: 1.4;
}

Probably it is the nested headings in a multi-column layout, the headings are bold and the font size is a bit larger:

By giving h2 setting column-span: all , let h2 heading across more columns on display, modify our CSS:

h2 {
    margin: 14px 0;
    font-size: 24px;
    line-height: 1.4;
+   column-span: all;
+   text-align: center;
}

You can get such a layout:

CodePen Demo -- CSS multi column Layout Demo 2

Multi-column layout combined with other layouts to achieve more complex layouts

Of course, column-span has a flaw, that is, its value is only column-span: all or column-span: none , that is, it either spans all columns or does not span columns.

If I now have a 3-column layout, but only want the title to span two columns, column-span: all will not be possible.

However, by nesting other layouts, we can sublimate the multi-column layout cleverly. For example, rachelandrew realizes such a nested layout:

<div class="container">
  <article>
    <p>By way of precaution ...</p>
    <h2>the first that ever burst Into that silent sea;</h2>
    <p>and with what ...</p>
  </article>

  <aside>
      <img src="demo.jpg">
      <figcaption>The Authoress, her Father and Mr. Spencer making an ascent</figcaption>
  </aside>
</div>

Through a 2-column Grid layout, nesting a two-column multi-column layout, the general CSS is as follows:

.container {
  max-width: 800px;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}

h2 {
  column-span: all;
  text-align: center;
}

.container article {
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

.container aside {
  border-left: 1px solid #ccc;
  padding: 0 1em;
}

In this way, we can achieve visual headings that span any column:

here for the complete Demo code: 160b458469d262 CodePen Demo - Smashing Multicol: mixing layout methods - By rachelandrew

shape-outside allows the layout to have wings of imagination

OK, enter the next module, the protagonist is shape-outside .

Before, I also wrote an article about shape-outside wonderful CSS shapes , interested students can also take a look.

shape-outside The CSS property defines a shape that can be non-rectangular, and adjacent inline content should be wrapped around this shape.

Using it, we can well realize a variety of non-horizontal and vertical layouts, so that the layout of the real live up to

The junction of the picture and text arrangement can be diagonal, like this:

CodePen Demo -- FCC: Build a Tribute Page - Michel Thomas by Stephanie

It can also be curved, like this:

CodePen Demo -- shape-outside: circle Demo

Moreover, it is an irregular container that can change dynamically:

CodePen Demo -- shape-outside animation

With reasonable use, we can create various fancy layout effects like newspaper pages:

Not only that, Yuan Chuan teacher even used shape-outside for some CSS art creations, let’s enjoy it together:

CodePen Demo -- shape-outside -- Face By yuanchuan

Take the picture at the beginning as an example:

It is an example of clever use of shape-outside . It divides the entire layout into 7 parts, and each part uses shape-outside for fine control. In fact, the complete layout looks like this:

In this article, the DEMO is explained in great detail: A CSS Venn Diagram

If you are also shape-outside , in this collection, you have collected a lot of excellent shape-outside layout demos on CodePen, you might as well take a look and learn - CSS Shapes Experiments

in conclusion

Today, the realization of creative layouts also requires us to master more CSS properties and skills. This article roughly introduces several useful properties for achieving creative layouts today:

• Grid layout family bucket and use Grid to achieve waterfall flow layout
• Multi-column layout multiple-column and multi-column layout nesting other layouts
• Various applications of shape-outside
• clip-path , transform and other attributes are interspersed in the above layout to enhance various layouts

Of course, CSS can achieve much more than that. For example, scrolling parallax, 3D transformation, etc. are all attributes that can be implemented using CSS and then integrated into the layout. Of course, this also requires us to have the eyes and thinking to create and discover beauty.

At last

Okay, this concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don’t miss my public - 160b458469d516 iCSS front-end facts 160b458469d518 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which is continuously updated, welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.