CSS 中 grid 布局是一种强大的方式来对页面进行布局,特别是在响应式设计中。在这里,我们将介绍两种不同的 grid 布局,并将它们并列显示。 第一个 grid 布局是通过使用 grid-temp
.container { display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows: auto 100px; }
.container { display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: auto; grid-template-areas: "header header header" ". main ." "sidebar main sidebar"; } <br> .header { grid-area: header; } <br> .sidebar { grid-area: sidebar; } <br> .main { grid-area: main; }
<div class="container"> <div class="grid1"> <!-- 第一个 grid 布局代码 --> </div> <div class="grid2"> <!-- 第二个 grid 布局代码 --> </div> </div> <br> <style> .container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } <br> .grid1, .grid2 { background-color: #f0f0f0; padding: 20px; } </style>
粉丝
0
关注
0
收藏
0