CSS를 사용하여 9개의 정사각형 그리드 레이아웃을 구현하는 여러 가지 방법에 대해 이야기해 보겠습니다!

이 기사에서는 CSS를 사용하여 9제곱 그리드 레이아웃을 구현하는 여러 가지 방법을 공유하고 n번째 유형과 n번째 하위 유형의 차이점을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

요 며칠간 페이지에서 "9각형 그리드 레이아웃"이라는 질문을 자주 봤습니다. 9각형 그리드 레이아웃을 구현하기 위해 여러 가지 방법을 시도해 보았는데, css 지식이 많이 들어가는 것을 발견하여 기록해 두었습니다. css 知识，记录一下。

我觉得这篇文章讲得很好，大家可以去参考一下大佬如何写边框九宫格！# 千万别小瞧九宫格 一道题就能让候选人原形毕露！

九宫格实现

下面几种实现方法都可自适应

基本布局和样式

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

实现一：flex

使用 flex 布局实现需要注意一个点，就是需要用 flex-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;
}

实现二：float

使用 float 来实现需要注意一个点，浮动会造成浮动崩塌，因此可以设置 overflow: hidden; 把 box 设置成 BFC 来解决浮动崩塌。

.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;
}

实现三：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;
}

实现四：table

使用表格来实现会存在一些缺陷，table 单元格之间的间隔是使用 border-spacing 属性来实现的，且不支持百分比的形式，而且单元格四周都有类似于 margin 的外边距的效果。

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

nth-of-type 与 nth-child 的区别

上面实现九宫格布局我用到了 nth-of-type 这个属性来实现最后一列的 margin-right: 0 和最后一行的 margin-bottom: 0。然后我记得 css 还有一个 nth-child 属性，这里顺便记录一下这两者的区别。

nth-of-type

MDN：:nth-of-type(n) 这个伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

从上图可以看出，因为 nth-of-type 他是当前元素的兄弟元素的第n个，所以 p:nth-of-type(4)是第四个 p 元素，即无论往中间添加什么元素，都只能是当前标签元素的第n个元素被选择。

nth-child

MDN：:nth-child(an+b)这个伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

nth-child 是当前元素的兄弟元素的第n个当前元素，即所有兄弟元素排序后的第n个当前标签元素。

从上图可以看出，nth-child 是当前元素的所有兄弟元素排序后的第n个当前标签元素，所以 p:nth-child(4)p마스터님이 테두리 그리드를 작성하는 방법을 참고하시면 좋을 것 같아요! # 하지 마세요 구공게에 대한 질문 하나를 과소평가하면 지원자의 진짜 색깔이 드러날 수 있습니다!

지우공게 구현

다음 구현 방법은 모두 적응형입니다

기본 레이아웃 및 스타일rrreeerrreee구현 1: flex

🎜레이아웃 구현에 flex를 사용하려면 한 가지 점에 주의해야 합니다. flex-wrap 속성을 ​​사용하여 래핑하세요. 🎜rrreee🎜구현 2: float🎜🎜float를 사용하여 구현하려면 한 가지에 주의해야 합니다. point, float float 축소가 발생하므로 overflow:hidden; 및 box를 BFC로 설정하여 float 축소를 해결할 수 있습니다. 🎜rrreee🎜구현 3: 그리드🎜🎜🎜rrreeerrreee🎜구현 4: table🎜🎜 table 셀 사이의 간격은 border-spacing 속성을 ​​사용하여 구현하는 데 몇 가지 결함이 있습니다. 백분율 형식을 지원하지 않습니다. 셀 주변에는 여백과 유사한 여백 효과가 있습니다. 🎜🎜🎜rrreeerrreee🎜 n번째 유형과 n번째-자식의 차이점🎜🎜n번째 유형 속성을 ​​사용하여 마지막 열의 margin-right: 0 및 margin-bottom: 0 마지막 줄에 있습니다. 그러다가 css에도 nth-child 속성이 있다는 것을 기억했습니다. 그런데 둘 사이의 차이점을 기록하겠습니다. 🎜🎜n번째 유형🎜🎜MDN::n번째- type(n) 이 의사 클래스는 형제 노드 그룹이 있는 태그용입니다. 형제 노드 그룹의 위치를 ​​필터링하려면 n을 사용하세요. 🎜🎜🎜🎜🎜🎜보실 수 있습니다 위 그림을 보면 n번째 유형이 현재 요소의 n번째 형제 요소이므로 p:nth-of-type(4)임을 알 수 있습니다. 은 네 번째 🎜 요소입니다. 즉, 가운데에 어떤 요소를 추가하더라도 현재 레이블 요소의 n번째 요소만 선택할 수 있습니다. 🎜🎜n번째-자식🎜🎜MDN::n번째-자식(an+ b )이 의사 클래스는 먼저 현재 요소의 모든 형제 요소를 찾은 다음 1부터 위치 순서로 정렬합니다. 선택한 결과는 CSS 의사 클래스입니다:nth-child 표현식 (an+b ) 괄호 안은 요소 집합(n=0, 1, 2, 3...)과 일치합니다. 🎜🎜nth-child는 현재 요소의 형제 요소 중 n번째 현재 요소입니다. 모든 형제 요소가 n 현재 태그 요소로 정렬된 후 n번째 현재 요소입니다. 🎜🎜🎜🎜🎜🎜보실 수 있습니다 위 그림을 보면 현재 요소의 모든 형제 요소가 정렬된 후 nth-child가 n번째 현재 태그 요소임을 알 수 있으므로 p:nth-child(4) 4위 순위 획득 비트의 🎜 요소입니다. 4번째 위치가 다른 태그요소인 경우에는 아래 그림과 같이 획득할 수 없습니다. 🎜🎜🎜🎜🎜드디어🎜🎜댓글란에서 함께 소통하며 함께 발전해가길 환영합니다! 🎜🎜(학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜

위 내용은 CSS를 사용하여 9개의 정사각형 그리드 레이아웃을 구현하는 여러 가지 방법에 대해 이야기해 보겠습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!