Recently saw an interview question: to achieve a nine-grid layout, as many ways as possible to achieve? Searched the cow guest face classics, Tencent, byte, Baidu, netease, jingdong and so on face classics have appeared this topic. So let’s implement it today and see how many ways it can be implemented (the following implementation of the grid layout is adaptive to the page size).

The implementation effect is as follows:

First, define a generic HTML structure:

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>
Copy the code

Public style:

ul {
	padding: 0;
}

li { 
	list-style: none;
  text-align: center;
	border-radius: 5px;
	background: skyblue;
}
Copy the code

1. The flex implementation

Flex: wrap; Flex: wrap; flex: wrap; flex: wrap; Causes the box to wrap when it should.

Because we set the bottom and right margins for each element, the right margins of the last column (3, 6, 9) and the bottom margins of the last row (7, 8, 9) are ul too large, so we use a type selector to eliminate their effects. The final implementation code is as follows:

ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

li {
  width: 30%;
  height: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
}

li:nth-of-type(3n){ 
  margin-right: 0;
}

li:nth-of-type(n+7) {margin-bottom: 0;
}
Copy the code

2. The grid

A grid layout is much easier to implement than a Flex layout by setting a few properties:

ul {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 30% 30% 30%; 
  grid-template-rows: 30% 30% 30%; 
  grid-gap: 5%; 
}
Copy the code

Grid-template-columns is used to set the width of a single element in each row, grid-template-rows is used to set the height of a single element in each column, and grid-gap is used to set the spacing between boxes.

In fact, Grid layout is still very useful, very convenient, there will be a detailed explanation of the Grid layout of the article, have want to know partners can pay attention to a wave of AO ~

3. The float

We need to give each box a fixed width and height. To make it wrap, we can use float. Since the child element floats, it forms BFC, so the parent element UL uses overflow:hidden; To eliminate the effects of floating. The final implementation code is as follows:

ul {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

li {
  float: left;
  width: 30%;
  height: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
}

li:nth-of-type(3n){ 
  margin-right: 0;
}

li:nth-of-type(n+7) {margin-bottom: 0;
}
Copy the code

4. The inline – block

Inline -block (float) inline-block (float) inline-block (float)

ul {
  width: 100%;
  height: 100%;
  letter-spacing: -10px;
}

li {
  width: 30%;
  height: 30%;
  display: inline-block;
  margin-right: 5%;
  margin-bottom: 5%;
}

li:nth-of-type(3n){ 
  margin-right: 0;
}

li:nth-of-type(n+7) {margin-bottom: 0;
}
Copy the code

Note that there may be gaps between elements set to inline-block, such as the following:

This is eliminated by using the letter-spacing property, which can be used to increase or decrease the spacing between characters. After use, it is normal and has the desired effect. Font-size: 0; To eliminate character spacing between boxes:

ul {
  font-size: 0;
}
Copy the code

5. The table

HTML structure:

<ul class="table">
  <li>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
  <li>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </li>
  <li>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </li>
</ul>
Copy the code

Table layout is not too difficult, first set the parent element to table layout, then use border-spacing to set spacing between cells, finally set LI to table rows and div to table cells, CSS style:

.table {
  width: 100%;
  height: 100%;
  display: table;
  border-spacing: 10px;
}

li {
  display: table-row; 
}

div {
  width: 30%;
  height: 30%;
  display: table-cell;
  text-align: center;
  border-radius: 5px;
  background: skyblue;
}
Copy the code

6. Summary

The above implementation methods are summarized as follows:

  • Flex layout is also the layout I use most of the time, although it has some compatibility issues, but since I work on a B-side project, there is little need to worry about compatibility issues. The Flex layout is mostly for mobile projects;
  • Grid layout is very convenient to implement, but its specification is not mature, mainstream browser use is less, not recommended in enterprise projects;
  • Use float to take elements out of the document flow, forming a BFC, without affecting other elements during rerendering. Note that the parent of an element that uses float will collapse and the float needs to be cleared.
  • When inline-block is used to implement a grid layout, there are gaps between elements that define the inline-block and need to be cleared.
  • The Table layout now feels less used and is rarely used in projects.