时间戳

首页 > 解决方案 > 具有 3 个偶数正方形和 1 个奇数正方形的 CSS 网格布局

css - 具有 3 个偶数正方形和 1 个奇数正方形的 CSS 网格布局

问题描述

我正在尝试使用网格获得以下布局： 在此处输入图像描述

到目前为止，这是我的代码。输出中的行间隙和列间隙不太正确。我不确定是否需要设置任何其他属性。

div.grid-container {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 1px;
        row-gap: 1px;
    }
    
    div.box-small {
    width: 30px;
    height: 30px;
    background: gray;
    }
    
        div.box-big {
    width: 50px;
    height: 50px;
    background: gray;
    }
<div class="grid-container">
                <div class="box-small"></div>
                <div class="box-big"></div>
                <div class="box-small"></div>
                <div class="box-small"></div>
            </div>

标签： csscss-grid

解决方案

您只需要将小 div 对齐到其单元格的末尾 align-self: end;

例子：

div.grid-container {
  display: inline-grid;
  grid-template-columns: 3fr 5fr;
  column-gap: 10px;
  row-gap: 10px;
  margin: 1em;
  border: 1px solid grey;
}

div.box-small {
  width: 30px;
  height: 30px;
  background: gray;
  align-self: end;
}

div.box-big {
  width: 50px;
  height: 50px;
  background: gray;
}
<div class="grid-container">
  <div class="box-small"></div>
  <div class="box-big"></div>
  <div class="box-small"></div>
  <div class="box-small"></div>
</div>

推荐阅读