数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法律学CSS 网格线
CSS 网格线提供了强大的布局框架，用于 Web 设计，它能够精准控制元素的排列和对齐。这些网格线既包括行，也包括列，它们提供了一个有序的框架，方便设计出复杂且灵活的布局。开发人员可以使用预定义的模板，轻松设置内容并调整其大小和方向以适配不同的屏幕。
CSS 网格线通过提高灵活性并避开复杂的定位 hack，有助于提升代码的可维护性。该适应性工具允许设计师创造美观且动态的界面，彻底改变了 Web 布局的思考和执行方式。
示例
我们来看以下示例，我们将把一个网格项目放置在第 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
996 浏览
广告