|
|
| 第24行: |
第24行: |
|
| |
|
|
| |
|
| <div class="grid-container">
| |
| <div class="item1">1</div>
| |
| <div class="item">2</div>
| |
| <div class="item">3</div>
| |
| <div class="item">4</div>
| |
| <div class="item">5</div>
| |
| <div class="item">6</div>
| |
| </div>
| |
|
| |
|
| {{#css: | | {{#css: |
| 第43行: |
第35行: |
| } | | } |
|
| |
|
| .grid-container {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
| |
| grid-gap: 10px;
| |
| justify-content: center;
| |
| align-items: center;
| |
| padding: 10px;
| |
| }
| |
|
| |
| .item {
| |
| background-color: #3498db;
| |
| color: #fff;
| |
| padding: 20px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .item1 {
| |
| background-color: #3498db;
| |
| color: #fff;
| |
| padding: 50px;
| |
| text-align: center;
| |
| grid-column: span 3; /* 跨足两列 */
| |
| grid-row: span 2; /* 跨足两行 */
| |
| }
| |
|
| |
|
| /* 添加媒体查询,以在小屏幕上调整布局 */ | | /* 添加媒体查询,以在小屏幕上调整布局 */ |