grid实现“品”字布局

最新推荐文章于 2023-07-01 20:32:30 发布

码林鼠

最新推荐文章于 2023-07-01 20:32:30 发布

阅读量241

点赞数

分类专栏： css 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_41254345/article/details/126892582

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在这里插入图片描述
这种布局通过flex似乎无法实现，所以这里通过grid来实现

.test_div {
  width: 320px;
  height: 300px;
  border: 1px solid red;
  display: grid;
  grid-gap: 10px 5px;
  grid-template-columns: repeat(6, 50px);
  grid-template-rows: repeat(2, 100px);
  div {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    grid-column: span 2;
    grid-row: span 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-of-type(1) {
      grid-column-start: 2;
      grid-column-end: 4;
    }
  }
}
.test_div1 {
  width: 320px;
  height: 300px;
  border: 1px solid red;
  display: grid;
  grid-gap: 10px 5px;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(2, 100px);
  div {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    grid-column: span 2;
    grid-row: span 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-of-type(1) {
      grid-column-start: 2;
      grid-column-end: 4;
    }
  }
}