首页css网格布局grid全代码

css网格布局grid全代码

时间: 2024-09-24 08:19:27 浏览: 57

CSS 网格布局 (Grid) 提供了一种创建二维布局的方式，它允许开发者更方便地组织内容成行和列。以下是一个简单的 CSS Grid 全代码示例，展示如何创建一个两列三行的网格： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { display: grid; /* 设置网格容器的宽度 */ width: 800px; /* 使用 auto-fit 或 auto-fill 设置网格单元格自动适应内容 */ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; /* 设置单元格之间的间距 */ } /* 定义网格项目样式 */ .grid-item { background-color: #f2f2f2; padding: 20px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.8); } </style> </head> <body> <div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> <div class="grid-item">Item 5</div> <div class="grid-item">Item 6</div> </div> </body> </html> ``` 在这个例子中： - `.grid-container` 是网格的容器，设置了 `display: grid` 来启用网格布局。 - `repeat(2, 1fr)` 指定了两列，每一列占据可用空间的 `1fr` （fractional unit，占一份额），`gap` 属性设置相邻单元格间的间隙。 - `.grid-item` 是网格内的项目，它们会自动填充并适应各自的网格区域。

阅读全文