时间戳

首页 > 解决方案 > 不跨越整个网格的中心列

html - 不跨越整个网格的中心列

问题描述

我有一个由 12 列组成的网格，它的子列每列跨越 2 列。但是，列数是可变的，因此有时会出现完整的网格，即 6 列，而有时只有部分网格，即 2 列。在这种情况下，我可以集中所有存在的列吗？

全网格

<div class="grid">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

部分网格

<div class="grid">
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.col {
  grid-column: span 2/span 2;
  // How can we centralise when less than a full grid?
}

标签： htmlcssgridcss-gridcentering

解决方案

只需确保子网格的grid-column跨度等于父网格的列。

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid2{
  border: solid 1px dodgerblue;
  grid-template-columns: 1fr 1fr 1fr;
}

.fullgrid{
  grid-column: 1/4; 
}

.grid1 > div{
  border: solid 1px orangered;
}
<div class="grid grid1">
  <div>1</div>
  <div>2</div>
  <div class="fullgrid">
    <div class="grid grid2">
        <div>3.1</div>
        <div>3.2</div>
        <div>3.3</div>
    </div>
  </div>
  <div>4</div>
  <div>4</div>
</div>

推荐阅读