Panduan sifat reka letak panel CSS: grid dan grid-template-lajur-tutorial css-php.cn

Panduan sifat reka letak panel CSS: grid dan grid-template-lajur

WBOY

Lepaskan： 2023-10-27 11:04:53

asal

956 orang telah melayarinya

CSS 面板布局属性指南：grid 和 grid-template-columns

Panduan Ciri Reka Letak Panel CSS: grid dan grid-template-lajur

Pengenalan:
Dalam reka bentuk web moden, melaksanakan reka letak yang kompleks merupakan kemahiran penting. Pembangunan CSS telah memudahkan untuk membuat reka letak halaman web yang fleksibel dan boleh digubah. Dalam artikel ini, kami akan menumpukan pada sifat grid CSS dan sifat grid-template-columns, yang merupakan alat berkuasa untuk melaksanakan reka letak panel.

Apakah susun atur grid?
Susun atur grid ialah model reka letak baharu dalam CSS, yang membolehkan kami mentakrif dan susun atur kandungan web menggunakan gabungan baris dan lajur. Dengan menggunakan atribut grid pada bekas induk, kami boleh membuat reka letak halaman web dengan mudah dengan ciri yang fleksibel dan responsif.

Apakah sifat grid-template-lajur?
grid-template-columns ialah salah satu atribut penting bagi reka letak grid, yang digunakan untuk menentukan lajur dalam reka letak grid. Dengan menentukan lebar dan bilangan lajur, kami boleh membuat reka letak panel dengan nombor dan lebar lajur yang berbeza. Nilai sifat ini boleh menjadi nilai piksel tetap, peratusan atau unit lain.

Kod sampel:
Mari kita gunakan contoh untuk menunjukkan cara menggunakan atribut grid-template-columns untuk melaksanakan reka letak panel yang fleksibel. Pertimbangkan reka letak contoh berikut:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .panel {
            background-color: #ccc;
            padding: 10px;
        }
        .panel:first-child {
            grid-column: 1 / span 2;
        }
        .panel:nth-child(2) {
            grid-column: 3;
            grid-row: 1 / span 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="panel">面板1</div>
        <div class="panel">面板2</div>
        <div class="panel">面板3</div>
        <div class="panel">面板4</div>
        <div class="panel">面板5</div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menukar elemen .container menjadi bekas grid dengan menetapkan atribut paparan kepada grid. Seterusnya, kami menggunakan sifat grid-template-columns untuk membahagikan bekas kepada 3 lajur, setiap satu dengan lebar 1fr. 1fr di sini bermakna memperuntukkan sama rata ruang yang ada.

Seterusnya, kami menggunakan atribut lajur grid untuk menyusun panel tertentu. Sebagai contoh, panel pertama merangkumi lajur 1 dan 2, manakala panel kedua mengambil lajur 3 dan baris pertama dan kedua yang baharu.

Akhir sekali, kami menggunakan atribut gap untuk menambah 10 piksel ruang antara panel untuk menjadikan reka letak kelihatan lebih cantik dan jelas.

Ringkasan:
Dengan menggunakan sifat grid dan grid-template-lajur, kami boleh membuat reka letak panel yang fleksibel dan responsif dengan mudah. Dengan menyatakan bilangan lajur dan lebar, kami boleh menggabungkan reka letak grid yang berbeza secara fleksibel. Saya harap artikel ini akan membantu anda menggunakan reka letak grid dalam reka bentuk web, menjadikan reka letak anda lebih fleksibel, cantik dan boleh disesuaikan dengan peranti dengan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Panduan sifat reka letak panel CSS: grid dan grid-template-lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!