On the analysis of CSS3 grid

In this article, we'll look at some of the new properties of CSS3, which makes it easier to work with grids in HTML and CSS. But first let's talk a little bit about the history of HTML and CSS grids and understand why it was difficult before

A brief history of the grid

Once upon a while, our layout was a mess. Tables and frames are the primary tools for creating multi-column layouts. Although they can finish the work (but in fact very bad).

Put your eyes on today. HTML and CSS have become very complex, and web design is growing in popularity and sophistication. The old layout method we used was obviously out of the way. However, a legacy problem surfaced: Multi-column layouts.

More complicated is that our page width is no longer static. The response is big, so we tend to have a percentage-based column width. A simple mesh based on a fixed 960 pixel width is not working-we need fluid grids.

There is a problem with floating solution columns in the CSS2 specification. To prevent the parent element from breaking your layout, we need to add clearfix. In this way, the height collapse of the parent element is corrected (the floating element is detached from the standard stream and the parent element considers the floating resource to be absent). Most of us accept this approach, but many people still think it is a hack (artifice).

The method of passing inline-box is not common, but still exists. Inline elements remain on one line, and they are arranged in a natural order. When a row is full, the elements that follow are naturally folded to the next line. But because he behaves as a text attribute, it behaves like text. This means that you must avoid whitespace elements (spaces, tabs, line breaks ...) between HTML elements. Inline-block is not designed for this, and the work is not very satisfactory.

In both of these 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: the box model

What the box model is, in a nutshell, the actual dimensions of an element include: Height/width + padding + edge width. The outer margin does not make the box bigger, only increases the gap between itself and other elements. So when you set the width, like 25%, the actual width of the box is much larger, which means there is not enough space on one line to drop the four elements.

This annoying problem has different solutions: negative margins, nested elements--all I know. They all need extra CSS or DOM elements to count as the hack method. Let's face the fact that there is no good way to solve the grid in CSS2.

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

Second, Box-sizing:border-box

One of the problems that has been solved is the nature of the expansion box model. This problem can be resolved by setting the value of Box-sizing to Border-box. By reducing the content width, the distance between the edge and the inner margin is also counted as the Width property.

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

Although this work is great, but we still need to use the float, we still need to clear the float. Furthermore, we can only use the padding as the element space, and the margins no longer work. This means that there is no real space between the fast elements, but rather its contents. Although this is very useful for many designs, it still feels like a minor mistake.

1.Firefox 1
2.Chrome 1
3.IE 8
4.Opera 7
5.Safari 3

Iii. Width:calc (percentage – distance)

Another great option is to use the Calc () function. He allows us to calculate the true width of an element without relying on javascript--it can be a different unit!

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: '; 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 choice, but unfortunately we still need to float, and we also need to list the containers as negative margins. Ditto, a great choice, but still a bit of a flaw.

1.Firefox 4
2.Chrome 19
3.IE 9
4.Opera?
5.Safari 6 (appears to be a little buggy)

Iv. Flexbox

A Telescopic layout box is an element that has a specific configuration behavior--something like a table. Is that true? Yes, that's right. The behavior of the table is actually quite good, because its display varies according to its content. However, table layouts are no longer used, so table labels are not an option.
At first, the telescopic box seemed to be a complex year. There are a lot of hard-to-understand properties, especially those who don't speak English as I do. Fortunately, Chirs Coyier wrote a great guide on telescopic boxes, which I must 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:

V. Conclusion

Although CSS3 brings many new features and fixes some legacy issues, in my view, the telescopic box layout is the only non-hack way to create an elastic mesh with CSS. Unfortunately, however, the browser's support performance is mediocre. Despite how, other methods enrich the performance, so they are a step forward and they have good browser support.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!