Grid in CSS3

In this article, we will look at some new attributes of CSS3 in the future, making it easier to use HTML and CSS to process the grid. But first, let's discuss the history of HTML and CSS grids to understand why it was difficult before. A Brief History of grids once upon a time, our layout was a mess. Tables and frameworks are the main tools used to create multi-column la S. Although they can do their work (but it is actually very bad ). Focus on today. HTML and CSS have become very complex, and the popularity and complexity of Web design are increasing. The old layout method we used is obviously out. However, a historical problem emerges: Multi-column layout. What's more complicated is that our page width is no longer static. Response is widely used, so we tend to use the percentage-based column width. A simple grid with a fixed 960 pixel width is no longer feasible-we need a fluid grid. There is a problem in the column-solving method using floating 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 out of the standard stream and the parent element will think that the floating resource does not exist ). Most of us accept this method, but many still think it is a kind of hack ). The inline-box method is not common, but it still exists. Inline elements are arranged in a natural order in a row. When a row is full, the subsequent elements are naturally folded to the next row. However, because of its character of text, its behavior is similar to text. This means that you must avoid blank elements (spaces, tabs, line breaks…) between HTML elements ......). Inline-block is not designed for this purpose and does not work well. Among the two methods, the floating method is more reliable. This is why it is more popular and ranks first. However, after creating multiple columns, we find that the content needs to be compressed again because we need some padding distance. This leads to the final question: what is the box model of the box model? In short, the actual size of an element includes: height/width + padding + edge width. The external data does not make the box bigger, but only adds gaps between itself and other elements. Therefore, when setting the width, such as 25%, the actual width of the box is much larger than this, which means that there is not enough space for a row to put down four elements. There are different solutions to this annoying problem: negative margin, nested elements-all I know. They all need additional CSS or DOM elements, counted as the hack method. In CSS2, there is no good solution to grid. But today, CSS3 provides great support, and the specification adds several new features dedicated for grid. What are these features? How do we use them? Let's take a look. Box-sizing: One of the problems border-box has solved is the nature of the extended box model. You can solve this problem by setting the value of box-sizing to border-box. By reducing the content width, the distance between the edge and the padding is also included in the width attribute. HTML <div class = "row"> <div class = "column"> Col one </div> <div class = "column"> Col two </div> <div class = "column"> Col three </div> <div class = "column"> Col four </div> the CSS copy code. row: after {clear: both; content: ''; display: block ;}. column {-webkit-box-sizing: border-box;-moz-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;} copy the code Demo. Although this is a great job, we still need to use floating, and we still need to clear floating. In addition, we can only use the padding as the element space, and the padding does not work. This means that there is no actual space between fast elements, but its content. Although this is very useful for many designs, it is still considered a small mistake. Firefox 1 Chrome 1IE 8 Opera 7 Safari 3 width: calc (percentage-distance) another great choice is to use the calc () function. It allows us to calculate the true width of an element without relying on JavaScript-it can be different units! HTML <div class = "row"> <div class = "column"> Col one </div> <div class = "column"> Col two </div> <div class = "column"> Col three </div> <div class = "column"> Col four </div> the CSS copy code. row {margin-left:-1em ;}. 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: ca Lc (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;} the ability to copy the code Demo and recalculate the actual size is a great choice, but unfortunately, we still need to float, and we also need the containers in the column to be the negative margin. Same as above, a great choice, but still a bit flawed. Firefox 4 Chrome 19IE 9 Opera? Safari 6 (appears to be a little buggy) Flexbox scaling layout box is an element with specific configuration behavior-a bit like a table. Is this true? Yes. The table behavior is actually great because its display changes based on its content. However, table layout is no longer used, so table labels are not an option. At first, the expansion box looked complicated for years. There are many attributes that are hard to understand, especially those who are not good at speaking in English like me. Fortunately, Chirs Coyier wrote a great guide on the telescopic box, which I must mention. HTML <div class = "row"> <div class = "column"> Col one </div> <div class = "column"> Col two </div> <div class = "column"> Col three </div> <div class = "column"> Col four </div> the CSS copy code. row {display:-webkit-flex;-webkit-flex-direction: row;-webkit-flex-wrap: nowrap;-webkit-justify-content: space-between; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-;}. 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 ;}