資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時裝研究
法律研究CSS 網格線
CSS 網格線為網頁設計提供了一個強大的佈局框架，該佈局框架可以對元素的排列和對齊進行精確控制。這些網格線包括行和列，它們提供了有條理的框架，從而可以更輕鬆地設計複雜且靈活的佈局。開發人員可以使用預定義的模板，輕鬆地組織內容並調整其大小和方向，以適應不同的螢幕。
透過提高靈活性並消除複雜放置技巧的需要，CSS 網格線促進了更易於維護的程式碼。此適應性工具允許設計人員建立美觀且動態的介面，從而徹底改變了對網頁佈局的構思和執行。
例項
我們來看一下下面的示例，在示例中我們將網格專案放在第 2 列行上，並將其結束在第 4 列行上。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #7D3C98;
text-align: center;
}
.tp {
display: grid;
grid-template-columns: auto auto;
gap: 15px;
background-color: #D5F5E3;
padding: 15px;
}
.tp>div {
background-color: #DE3163;
text-align: center;
padding: 10px 10px;
font-size: 25px;
color: #FDFEFE;
}
.x2 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>
</head>
<body>
<h2>Grid Lines</h2>
<div class="tp">
<div class="x1">1</div>
<div class="x2">2</div>
<div class="x3">3</div>
<div class="x4">4</div>
<div class="x5">5</div>
<div class="x6">6</div>
</div>
</body>
</html>
當我們執行上述程式碼時，它將在網頁上生成一個包含 div 框的輸出。
例項
再看另一個情況，在另一個情況中我們將網格專案放在第 2 行行上，並將其結束在第 5 行行上。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #1E8449;
text-align: center;
}
.tp {
display: grid;
grid-template-columns: auto auto;
gap: 15px;
background-color: #FCF3CF;
padding: 15px;
}
.tp>div {
background-color: #CCD1D1;
text-align: center;
padding: 10px 10px;
font-size: 25px;
color: #DE3163;
}
.x2 {
grid-row-start: 2;
grid-row-end: 5;
}
</style>
</head>
<body>
<h2>Grid Lines</h2>
<div class="tp">
<div class="x1">1</div>
<div class="x2">2</div>
<div class="x3">3</div>
<div class="x4">4</div>
<div class="x5">5</div>
<div class="x6">6</div>
</div>
</body>
</html>
執行上述程式碼時，輸出視窗將彈出，在網頁上顯示 div 框。
已於： 08-Jan-2024 更新
998 次瀏覽
廣告