Let's talk about several ways to use CSS to realize the nine-square grid layout!

This article will share with you several methods of using CSS to implement nine-square grid layout, and introduce the difference between nth-of-type and nth-child. I hope it will be helpful to everyone!

#In the past few days, I have often seen a question on the page, "Nine-square grid layout." I tried several methods to implement the nine-square grid layout, and found that it involved a lot of css knowledge, so I recorded it.

I think this article is very good. You can refer to how the master writes the border nine-square grid! # Don’t underestimate Jiugongge. One question can reveal the candidate’s true colors!

Jiugongge implementation

The following implementation methods can all be adaptive

Basic layout and Style

<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>

.box {
    background: #e4f7fd61;
    border: 2px solid #0786ada1;
    border-radius: 8px;
}

ul {
    padding: 0; 
    margin: 0;
}

.box li {
    list-style: none;
    text-align: center;
    line-height: 200px;
    background: skyblue;
    border-radius: 8px;
    font-size: 20px;
    color: black;
}

Implementation 1: flex

There is one point to note when using flex for layout implementation , you need to use the flex-wrap attribute to make it wrap.

.box {
    width: 100%;
    overflow: hidden;
}

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

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

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

.box li:nth-of-type(n+7) {
    margin-bottom: 0;
}

Implementation 2: float

Using float to implement requires attention to one point, floating will cause floating collapse. Therefore, you can set overflow: hidden; and set box to BFC to solve floating collapse.

.box {
    width: 100%;
    overflow: hidden;
}

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

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

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

.box li:nth-of-type(n+7) {
    margin-bottom: 0;
}

Implementation three: grid

##

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

box {
    background: #e4f7fd61;
    border: 2px solid #0786ada1;
    border-radius: 8px;
}

.grid {
    display: grid;
    width: 100%;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5%;
    grid-auto-flow: row;
}

.grid>div {
    list-style: none;
    text-align: center;
    line-height: 200px;
    background: skyblue;
    border-radius: 8px;
    font-size: 20px;
    color: black;
}

Implementation four: table

There are some flaws in using tables.

table The spacing between cells is achieved using the border-spacing attribute, and Does not support the percentage format, and there is a margin effect similar to margin around the cell.

<div class="box">
    <ul>
        <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>
</div>

.box {
    width: 100%;
    overflow: hidden;
}

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

.box li {
    display: table-row;
}

.box li div {
    display: table-cell;
    text-align: center;
    border-radius: 10px;
}

The difference between nth-of-type and nth-child

I used the nine-square grid layout above

nth-of-type This attribute is used to implement the margin-right: 0 of the last column and the margin-bottom: 0 of the last row. Then I remembered that css also has a nth-child attribute. By the way, I will record the difference between the two.

nth-of-type

MDN：:nth-of-type(n) This pseudo-class is for tags that have a group of sibling nodes. Use n to filter out the positions of a group of sibling nodes.

As can be seen from the above picture, because

nth-of-type he is the nth sibling element of the current element , so p:nth-of-type(4) is the fourth p element, that is, no matter what element is added to the middle, it can only be the current tag element The nth element of is selected.

nth-child

MDN：:nth-child(an b)this The pseudo-class first finds all the sibling elements of the current element, and then sorts them in position order starting from 1. The result of the selection is the set of elements matched by the expression (an b) in the CSS pseudo-class:nth-child brackets (n=0, 1, 2, 3...)

nth-child is the nth current element of the sibling elements of the current element, that is, the nth after all sibling elements are sorted Current tag element .

As can be seen from the above figure,

nth-child is the nth child after sorting all sibling elements of the current element The current tag element , so p:nth-child(4) is ranked 4th p elements of bits. If the 4th position is other tag elements, it cannot be obtained, as shown in the figure below:

Finally

Welcome everyone to join us in the comment area Communicate and make progress together!

(Learning video sharing:

css video tutorial)

The above is the detailed content of Let's talk about several ways to use CSS to realize the nine-square grid layout!. For more information, please follow other related articles on the PHP Chinese website!