Question

我一直在搜索SO（和互联网）寻求成功的答案。我是CSS网格布局的新手。

请考虑以下截断的HTML标记：行和列的数量是固定的，并且是已知的。

<div class="wrapper">

   <div class="ISOday-1">Monday</div>
   <div class="ISOday-2">Tuesday</div>
   <div class="ISOday-3">Wednesday</div>
   <div class="ISOday-4">Thursday</div>
   <div class="ISOday-5">Friday</div>
   <div class="ISOday-6">Saturday</div>

   <label class="ISOday-1">09:00</label>
   <label class="ISOday-1">09:30</label>
   ...
   <label class="ISOday-2">09:00</label>
   <label class="ISOday-2">09:30</label>
   ...
   <label class="ISOday-3">09:00</label>
   <label class="ISOday-3">09:30</label>
   ...
   <label class="ISOday-4">09:00</label>
   <label class="ISOday-4">09:30</label>
   ...
   ...
</div>

还有CSS：

.wrapper {
  display: grid;
  grid-template-columns: [monday] auto [tuesday] auto [wednesday] auto [thursday] auto [friday] auto [saturday] auto;
}

.ISOday-1 { grid-column: monday;}
.ISOday-2 { grid-column: tuesday; }
.ISOday-3 { grid-column: wednesday; }
.ISOday-4 { grid-column: thursday; }
.ISOday-5 { grid-column: friday; } 
.ISOday-6 { grid-column: saturday; }

结果是这样的：

问题是：

对于星期二，我在开始处有4个空行。
我星期三有8 ...

我尝试了许多CSS Grid属性，但是无法使所有时隙都从第2行开始。你有什么线索吗？

Answer 1

使用grid-auto-flow: column

列

是一个关键字，用于指定自动放置算法来放置项目，方法是依次填充各列，并根据需要添加新列。

MDN

注意：这适用于您的情况，因为每列的长度都相同。如果不是NOTcase，则建议使用其他结构/布局机制。

.wrapper {
  display: grid;
  grid-template-columns: [monday] auto [tuesday] auto [wednesday] auto [thursday] auto [friday] auto [saturday] auto;
  grid-auto-flow: column;
}

.ISOday-1 {
  grid-column: monday;
}

.ISOday-2 {
  grid-column: tuesday;
}

.ISOday-3 {
  grid-column: wednesday;
}

.ISOday-4 {
  grid-column: thursday;
}

.ISOday-5 {
  grid-column: friday;
}

.ISOday-6 {
  grid-column: saturday;
}

<div class="wrapper">

  <div class="ISOday-1">Monday</div>
  <div class="ISOday-2">Tuesday</div>
  <div class="ISOday-3">Wednesday</div>
  <div class="ISOday-4">Thursday</div>
  <div class="ISOday-5">Friday</div>
  <div class="ISOday-6">Saturday</div>

  <label class="ISOday-1">09:00</label>
  <label class="ISOday-1">09:30</label>

  <label class="ISOday-2">09:00</label>
  <label class="ISOday-2">09:30</label>

  <label class="ISOday-3">09:00</label>
  <label class="ISOday-3">09:30</label>

  <label class="ISOday-4">09:00</label>
  <label class="ISOday-4">09:30</label>

</div>

Answer 2

您也可以像这样简化它。

这不是您执行操作的确切方法，但是它减少了所需类的数量。

.wrapper {
  margin: 0 auto;
  margin-top: 100px;

  width: 700px;
  background: rgb(210, 210, 210);
  
  display: grid;
  grid-template-columns: [monday] auto [tuesday] auto [wednesday] auto [thursday] auto [friday] auto [saturday] auto;
  grid-auto-rows: 30px;
}

<div class="wrapper">

   <div>Monday</div>
   <div>Tuesday</div>
   <div>Wednesday</div>
   <div>Thursday</div>
   <div>Friday</div>
   <div>Saturday</div>
  
  <label> 9:00</label>
  <label> 9:00</label>
  <label> 9:00</label>
  <label> 9:00</label>
  <label> 9:00</label>
  <label> 9:00</label>
  
  <label> 9:30</label>
  <label> 9:30</label>
  <label> 9:30</label>
  <label> 9:30</label>
  <label> 9:30</label>
  <label> 9:30</label>
  
  <label> 10:00</label>
  <label> 10:00</label>
  <label> 10:00</label>
  <label> 10:00</label>
  <label> 10:00</label>
  <label> 10:00</label>
</div>

如何“填充” CSS网格列？

2 个答案: