数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
广告