Analysis of CSS3 grid

In this article, we will look at some new CSS3 properties to make working with grids easier with HTML and CSS. But first let’s discuss a little history of HTML and CSS grids, and understand why it was so difficult before.

1. A brief history of grids

Once upon a time, our layouts were a mess. Tables and frames are the primary tools for creating multi-column layouts. While they get the job done (and are actually pretty bad at it).

Set your sights to today. HTML and CSS have become very complex, and web design is growing in popularity and sophistication every day. The old layout methods we used to use are clearly out. However, a legacy issue surfaced: multi-column layout.

To complicate things further, our page width is no longer static. Responsiveness is all the rage, so we tend to favor percentage-based column widths. A simple grid based on a fixed 960 pixel width no longer works – we need a fluid grid.

There is a problem with the method of using floats to solve columns in the CSS2 specification. To prevent parent elements from breaking your layout, we need to add a clearfix. Through this method, the height collapse problem of the parent element is corrected (the floating element breaks away from the standard flow, and the parent element will think that the floating resource does not exist). We mostly accept this approach, but many still consider it a hack.

The method via inline-box is less common, but still exists. Inline elements will remain on one line, in their natural order. When a row is full, subsequent elements are naturally folded to the next row. But because it behaves like text, it behaves like text. This means you have to avoid whitespace elements (spaces, tabs, newlines...) between HTML elements. Inline-block is not designed for this, and it does not work very well.

Of these two methods, the floating method is more reliable. That's why it's more popular and ranked first. However, after creating multiple columns, we find that we need to compress the content again because we need some padding distance. This leads to the final question: What is the box model? To put it simply, the actual size of an element includes: height/width, padding, and side width. The outer border does not make the box larger, it just adds space between itself and other elements. So when you set the width to, say, 25%, the actual width of the box is much larger than that, which means there isn't enough room for four elements in one row.

There are different solutions to this annoying problem: negative margins, nested elements – that’s all I know. They all require additional CSS or DOM elements and count as hacks. Let's face it, there is no good way to solve grids in CSS2.

Today, however, CSS3 provides good support, and the specification has added several new features specifically for grids. What are these characteristics? How do we use them? Let's take a look.

2. box-sizing: border-box

One of the problems that has been solved is the nature of the extended box model. This problem can be solved by setting the value of box-sizing to border-box. By reducing the width of the content, the distance between the sides and the padding is also calculated into the width attribute.

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row:after {
  clear: both;
  content: '';
  display: block;
}
.column {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  min-height: 8em;
  overflow: hidden;
  padding: 2em;
  width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Effect

While this works great, we still need to use Float, we still need to clear the float. Furthermore, we can only use padding as space for the element, margins no longer play a role. This means there is no actual space between the fast elements, but rather its contents. While this is very useful for many designs, it still feels like a small mistake.

1.Firefox 1

2.Chrome 1

3.IE 8
4.Opera 7
5.Safari 3

3. width: calc( Percent – ​​Distance)

Another great option is to use the calc() function. It allows us to calculate the true width of an element - in different units - without relying on JavaScript!

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row { margin-left: -1em; }</p> <p>.row:after {
 clear: both;
 content: &#39;&#39;;
 display: block;
}
.column {
 float: left;
 margin-left: 1em;
 min-height: 8em;
 padding: 1em;
 width: -webkit-calc(25% - 3em);
 width: -moz-calc(25% - 3em);
 width: calc(25% - 3em);
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Effect:

The ability to recalculate the actual size is a Great option, but unfortunately we still need floats and we also need negative margins for the column's container. Ditto, a great choice, but still somewhat flawed.

1.Firefox 4

2.Chrome 19

3.IE 9
4.Opera ?
5.Safari 6 (appears to be a little buggy)

4. Flexbox

The flex layout box is an element with specific configuration behavior-a bit like a table. is this real? Yes, that's right. The behavior of the table is actually quite nice, as its display changes based on its content. But table layouts are no longer used, so table tags are not an option.

At first, the telescoping box looked complicated. There are many attributes that are difficult to understand, especially for someone like me who is not good at speaking in English. Luckily, Chris Coyier wrote a great guide on retractable boxes that I have to mention.

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: space-between;</p>
<p>    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.column {
    margin: 0.5em;
    min-height: 8em;
    padding: 1em;
    width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Effect:

5. Conclusion

Although CSS3 brings many new features and fixes some historical issues, in my opinion, flex box layout is the only non-hack way to create a flexible grid with CSS. Unfortunately, however, browser support is mediocre. Nonetheless, other methods enrich the presentation, so they are an improvement, and they have good browser support.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The beautification and function of div imitation checkbox form style

CSS page has left, middle and right columns Implementation of layout

The above is the detailed content of Analysis of CSS3 grid. For more information, please follow other related articles on the PHP Chinese website!