Mari kita bincangkan tentang beberapa cara untuk menggunakan CSS untuk merealisasikan susun atur grid sembilan persegi!

Artikel ini akan berkongsi dengan anda beberapa kaedah menggunakan CSS untuk melaksanakan reka letak grid sembilan segi empat sama, dan memperkenalkan perbezaan antara jenis ke-n dan anak-anak saya harap ia akan membantu semua orang!

Dalam beberapa hari lalu, saya sering melihat soalan pada skrin, "Susun atur grid sembilan persegi." Saya mencuba beberapa kaedah untuk melaksanakan reka letak grid sembilan persegi, dan mendapati ia melibatkan banyak css pengetahuan, jadi saya merekodkannya.

Saya rasa artikel ini sangat bagus Anda boleh merujuk kepada cara tuan menulis grid sempadan! # Jangan memandang rendah Jiugongge Satu soalan boleh mendedahkan warna sebenar calon!

Pelaksanaan grid sembilan persegi

Kaedah pelaksanaan berikut semuanya adaptif

Susun atur asas dan Gaya

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

Pelaksanaan 1: flex

Menggunakan flex pelaksanaan reka letak perlu perhatikan satu perkara, anda perlu menggunakan atribut flex-wrap untuk menjadikannya balut baris.

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

Pelaksanaan 2: terapung

Menggunakan float untuk melaksanakan perlu memberi perhatian kepada satu titik, terapung akan menyebabkan terapung runtuh , jadi anda boleh Tetapkan overflow: hidden; Tetapkan box kepada BFC untuk menyelesaikan keruntuhan apungan.

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

Pelaksanaan tiga: 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;
}

Pelaksanaan 4: jadual

Terdapat beberapa kelemahan dalam menggunakan jadual untuk melaksanakannya table Jarak antara sel dilaksanakan menggunakan atribut border-spacing dan . bentuk peratusan tidak disokong dan terdapat kesan jidar yang serupa dengan margin di sekeliling sel.

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

Perbezaan antara nth-of-type dan nth-child

Saya menggunakan atribut nth-of-type untuk melaksanakan sembilan -reka letak grid persegi di atas Untuk melaksanakan margin-right: 0 dalam lajur terakhir dan margin-bottom: 0 dalam baris terakhir. Kemudian saya teringat bahawa css juga mempunyai atribut nth-child Saya akan merekodkan perbezaan antara keduanya di sini.

jenis kenth

MDN: :nth-of-type(n) Kelas pseudo ini adalah untuk nod dengan set daripada adik-beradik Tag , menggunakan n untuk menapis kedudukan sekumpulan nod adik-beradik.

Seperti yang dapat dilihat dari gambar di atas, kerana jenis ke-nth dia adalah unsur adik-beradik ke- elemen semasa , jadi p:nth-of-type(4) ialah elemen p keempat, iaitu, tidak kira apa elemen yang ditambahkan pada tengah, hanya elemen ke-n bagi elemen label semasa boleh dipilih.

anak ke-1

MDN: :nth-child(an b)Kelas pseudo ini mula-mula mencari semua unsur adik-beradik semasa elemen, Kemudian susun daripada 1 mengikut urutan kedudukan, dan hasil yang dipilih ialah set elemen yang dipadankan dengan ungkapan (an b) dalam kurungan anak ke-n (n=0, 1, 2, 3...)

nth-child ialah elemen semasa ke-n bagi unsur adik-beradik unsur semasa, iaitu unsur ke-n elemen teg semasa selepas semua unsur adik-beradik diisih.

Seperti yang dapat dilihat daripada rajah di atas, anak ke-nth ialah anak ke-selepas menyusun semua elemen adik-beradik dalam elemen semasa Elemen teg semasa ialah , jadi p:nth-child(4) berada di kedudukan ke-4 Elemen p untuk bit. Jika kedudukan ke-4 ialah elemen tag lain, ia tidak boleh diperolehi, seperti yang ditunjukkan dalam rajah di bawah:

Akhir sekali

Selamat datang semua menyertai kami dalam kawasan komen Berkomunikasi dan maju bersama!

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Mari kita bincangkan tentang beberapa cara untuk menggunakan CSS untuk merealisasikan susun atur grid sembilan persegi!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!