css 网格布局

原创已于 2022-07-14 11:35:47 修改 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2022-07-14 11:07:57 首次发布

css 专栏收录该内容

18 篇文章

订阅专栏

本文详细讲解了如何使用CSS Grid实现不同网格布局的调整，包括网格区域设置的变化，如`.item-1`的位置从[2/2/4/4]到[1/2/2/3]，展示了灵活布局的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.box{
        display:grid;
        grid-template-columns: 200px 200px 200px 200px;
        grid-template-rows: 200px 200px 200px 200px;
        grid-row-gap: 20px;
        grid-column-gap: 20px;
      }
      .item{
        background: #CCC;
        text-align: center;
        line-height: 200px;
      }
      .item-1 {
        grid-area: 2 / 2 / 4 / 4;
        line-height: 400px;
        background: #CCC;
        text-align: center;
        font-size: 50px;
      }

在这里插入图片描述

.box{
        display:grid;
        grid-template-columns: 200px 200px 200px 200px;
        grid-template-rows: 200px 200px 200px 200px;
        grid-row-gap: 20px;
        grid-column-gap: 20px;
      }
      .item{
        background: #CCC;
        text-align: center;
        line-height: 200px;
      }
      .item-1 {
        grid-area: 2 / 3 / 2 / 5;
        line-height: 200px;
        background: #CCC;
        text-align: center;
        font-size: 50px;
      }

在这里插入图片描述

.box{
        display:grid;
        grid-template-columns: 200px 200px 200px 200px;
        grid-template-rows: 200px 200px 200px 200px;
        grid-row-gap: 20px;
        grid-column-gap: 20px;
      }
      .item{
        background: #CCC;
        text-align: center;
        font-size: 50px;
      }
      .item-1 {
        grid-area: 1 / 2 / 2 / 3;
        background: #CCC;
        text-align: center;
        font-size: 50px;
      }
      .item-2{
        line-height: 150px;
      }
      .item-3{
        line-height: 200px;
      }

在这里插入图片描述