Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur halaman-html tutorial-php.cn

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur halaman

PHPz

Lepaskan： 2023-10-21 11:43:49

asal

1478 orang telah melayarinya

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur halaman

Daripada susun atur jadual lalu hingga susun atur Flex semasa, CSS telah berkembang dan berkembang dalam reka letak halaman. Kini, susun atur Grid CSS telah menjadi kaedah susun atur yang berkuasa dan fleksibel. Dalam tutorial ini, kita akan belajar cara menggunakan reka letak Grid CSS untuk mencipta reka letak halaman yang kompleks dan cantik.

Reka letak Grid CSS ialah sistem grid dua dimensi yang membolehkan kami membahagikan halaman kepada berbilang baris dan lajur, dan kemudian meletakkan kandungan ke dalam baris dan lajur ini. Walaupun susun atur Grid masih merupakan ciri yang agak baharu, ia telah pun disokong oleh pelayar moden dan digunakan secara meluas dalam aplikasi praktikal.

Sebelum kita mula, kita perlu memahami terma dan konsep asas susun atur Grid. Susun atur Grid terdiri daripada komponen utama berikut:

Bekas (Bekas): mengandungi elemen induk bagi semua item Grid. Dayakan reka letak Grid dengan menetapkan atribut display elemen kepada grid atau inline-grid.

display

grid

inline-grid

行（Row）：Grid布局的水平部分，可以通过设置容器的grid-template-rows来定义行的大小和数量。
列（Column）：Grid布局的垂直部分，可以通过设置容器的grid-template-columns来定义列的大小和数量。
Grid项（Grid Item）：被放置在网格中的元素。在容器中直接写入的元素会自动被视为Grid项。

现在让我们动手实践一下，假设我们要创建一个简单的网格布局，其中有一个头部、一个侧边栏和一个主要内容区域。

创建HTML结构：

<!DOCTYPE html>
<html>
<head>
 <title>Grid布局教程</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
     <header>头部</header>
     <aside>侧边栏</aside>
     <main>主要内容区域</main>
 </div>
</body>
</html>

Salin selepas log masuk

在CSS中定义Grid布局：

.container {
 display: grid;
 grid-template-rows: 100px auto;
 grid-template-columns: 200px 1fr;
 grid-gap: 10px;
}

header {
 grid-row: 1;
 grid-column: 1 / span 2;
 background-color: #f2f2f2;
 padding: 20px;
}

aside {
 grid-row: 2;
 grid-column: 1;
 background-color: #e9e9e9;
 padding: 20px;
}

main {
 grid-row: 2;
 grid-column: 2;
 background-color: #d9d9d9;
 padding: 20px;
}

Salin selepas log masuk

在上面的代码中，我们首先在容器中设置了Grid布局，定义了两行和两列。头部元素占据了第一行的两个列，侧边栏和主要内容分别占据了第二行的第一个和第二个列。同时，我们还设置了网格项之间的间距为10像素。

通过这个简单的例子，我们可以看到Grid布局的强大之处。不仅仅是指定行和列的大小和数量，我们还可以通过grid-row和grid-column属性来指定网格项的位置，使布局更加灵活。

除了上面的基本用法外，Grid布局还提供了更多强大的功能，如自适应大小、自动填充空间等。对于想要深入学习和掌握Grid布局的人来说，可以进一步了解一下grid-template-areas、grid-auto-rows、grid-auto-columnsBaris: Bahagian mendatar reka letak Grid Anda boleh menentukan saiz dan bilangan baris dengan menetapkan grid-template-rows bekas.

Lajur: Bahagian menegak reka letak Grid Anda boleh menentukan saiz dan bilangan lajur dengan menetapkan grid-template-columns bekas.

Item Grid: Elemen diletakkan dalam grid. Elemen yang ditulis terus dalam bekas dianggap secara automatik sebagai item Grid.

Sekarang mari kita mulakan, andaikan kita ingin membuat reka letak grid mudah dengan pengepala, bar sisi dan kawasan kandungan utama. 🎜🎜🎜🎜 Buat struktur HTML: 🎜rrreee🎜🎜 Tentukan susun atur Grid dalam CSS: 🎜rrreee🎜Dalam kod di atas, kami mula-mula menetapkan susun atur Grid dalam bekas, Dua baris dan dua lajur ditakrifkan. Elemen pengepala menduduki dua lajur baris pertama, dan bar sisi dan kandungan utama masing-masing menduduki lajur pertama dan kedua baris kedua. Pada masa yang sama, kami juga menetapkan jarak antara item grid kepada 10 piksel. 🎜🎜Melalui contoh mudah ini, kita dapat melihat kuasa reka letak Grid. Selain menentukan saiz dan bilangan baris dan lajur, kami juga boleh menentukan kedudukan item grid melalui atribut grid-row dan grid-column untuk membuat reka letak lebih fleksibel. 🎜🎜Selain penggunaan asas di atas, susun atur Grid juga menyediakan fungsi yang lebih berkuasa, seperti saiz penyesuaian, pengisian ruang automatik, dll. Bagi mereka yang ingin mempelajari dan menguasai reka letak Grid secara mendalam, anda boleh mengetahui lebih lanjut tentang grid-template-areas, grid-auto-rows, grid-auto -columns dan atribut lain. 🎜🎜Saya berharap melalui tutorial ini, anda boleh mempunyai pemahaman dan penguasaan awal tentang cara menggunakan susun atur Grid CSS untuk susun atur halaman. Dengan menggunakan reka letak Grid secara fleksibel, anda boleh membuat reka letak halaman web yang unik, cantik dan responsif. Berseronoklah dengan reka letak CSS! 🎜

Atas ialah kandungan terperinci Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!