添加 CSS
- 将 display 属性设置为“grid”以将元素显示为块级网格容器。
- 使用 grid-gap 属性以像素为单位定义网格之间的间隙。
- 将 grid-template-columns 设置为“repeat(auto-fill, minmax(150px, 1fr))”。
此属性指定网格布局中每列的大小（宽度）。其中 grid-template-columns 将列设置为最小 150 像素和 1fr 最大剩余空间。轨道将根据需要重复多次以适应容器。 “自动填充”值使其在适合容器的尽可能多的轨道上重复。
- 设置 <div> 元素的字体大小。
- 设置元素的内边距、颜色和背景。
- 使用 text-align 属性定义文本应位于的位置。
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
#grid>div {
font-size: 30px;
padding: .5em;
color: #ffffff;
background: #1c87c9;
text-align: center;
}
这是我们示例的完整代码。
使用“自动填充”值创建响应式网格布局的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
#grid > div {
font-size: 30px;
padding: .5em;
color: #ffffff;
background: #1c87c9;
text-align: center;
}
</style>
</head>
<body>
<div id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
我们可以使用“自动适应”值创建网格布局。
“自动填充”和“自动填充”之间的区别在于，“自动填充”用尽可能多的列填充行。
相比之下，“自动适应”通过扩展当前可用的列使其填充剩余空间来适应空间。
使用“auto-fill”和“auto-fit”值创建响应式网格布局的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.grid {
display: grid;
grid-gap: 10px;
border: 2px solid #000000;
margin: 10px;
}
.grid > div {
font-size: 30px;
padding: .5em;
background: gold;
text-align: center;
}
.auto-fill {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.auto-fit {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
</style>
</head>
<body>
<h2>Auto-fill</h2>
<div class="grid auto-fill">
<div>1</div>
<div>2</div>
</div>
<h2>Auto-fit</h2>
<div class="grid auto-fit">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
为了使网格响应，我们将使用媒体查询。
媒体查询和网格协同工作得非常好。
媒体查询告诉网格在某些设备宽度上具有特定的布局。
调整浏览器的大小以查看网格如何响应。
使用媒体查询创建响应式网格布局的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #eeeeee;
color: #444;
display: grid;
grid-gap: 1em;
grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}
@media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas: "header header" "sidebar content" "sidebar2 sidebar2" "footer footer";
}
}
@media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas: "header header header" "sidebar content sidebar2" "footer footer footer";
max-width: 600px;
}
}
.box {
background-color: #444;
color: #ffffff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #8ebf42;
}
.sidebar2 {
background-color: #ccc;
color: #444;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
<br /> 当你调整浏览器的大小时，这个列会变高。
</div>
<div class="box footer">Footer</div>
</div>
</body>
</html>
创建 HTML
- 创建一个 id 为“grid”的 <div> 元素。
- 创建九个 <div> 元素，在每个元素中写入数字。
<div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
定制网页设计最好的东西之一是定制的响应式网格系统。
一切都是自定义的，包括列数、列大小、装订线等。
网格可以响应固定大小的网格项目将根据视口大小移动位置。
在本教程中，我们将展示如何按照下面描述的步骤创建响应式网格布局。
"auto-fill" 和 "auto-fit" 值允许创建一个网格，其中包含适合容器的特定大小的尽可能多的轨道。
换句话说，创建响应式网格布局意味着当我们调整浏览器大小时，网格项会改变它们的位置。
日期：2020-06-02 22:15:02 来源：oir作者：oir