2025年grid布局实例（grid布局居中）

科技前沿 • 2025-05-21 11:05 • 阅读 58

大家好，我是讯享网，很高兴认识大家。

CSS网格布局是一种二维布局系统，它可以让我们更方便地创建复杂的网页布局。下面是一个简单的例子：

&lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;item item-1&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;item item-2&quot;&gt;2&lt;/div&gt; &lt;div class=&quot;item item-3&quot;&gt;3&lt;/div&gt; &lt;div class=&quot;item item-4&quot;&gt;4&lt;/div&gt; &lt;div class=&quot;item item-5&quot;&gt;5&lt;/div&gt; &lt;div class=&quot;item item-6&quot;&gt;6&lt;/div&gt; &lt;/div&gt;

讯享网

讯享网.container { display: <em>grid</em>; <em>grid</em>-template-columns: 100px 100px auto; <em>grid</em>-template-rows: 100px 100px auto; <em>grid</em>-gap: 10px; } .item { background-color: #ddd; padding: 20px; font-size: 30px; text-align: center; }

在这个例子中，我们创建了一个包含6个子元素的容器，并使用display: grid将其设置为网格布局。然后，我们使用grid-template-columns和grid-template-rows属性来定义网格的列和行。在这个例子中，我们定义了3列和3行，前两列和前两行的宽度和高度都是100像素，最后一列和最后一行的宽度和高度自适应。我们还使用grid-gap属性来定义网格之间的间距。

讯享网

接下来，我们为每个子元素定义了一个类名，并使用grid-column和grid-row属性来指定它们在网格中的位置。在这个例子中，我们将第一个子元素放在第1列和第1行，跨越了2列；将第二个子元素放在第3列和第1行；将第三个子元素放在第1列和第3行；将第四个子元素放在第3列和第3行；将第五个子元素放在第2列和第2行，跨越了2行；将第六个子元素放在第2列和第3行。

这样，我们就创建了一个简单的网格布局。当然，CSS网格布局还有很多其他的属性和用法，可以用来创建更复杂的布局。如果您想深入了解CSS网格布局，请参考相关文档和教程。

2025年grid布局实例（grid布局居中）

相关推荐