如何在 CSS 网格中给出多个列，其中我将网格自动流设置为列

Question

我有一个时隙列表，网格自动流设置为列。 在小屏幕上我想要 1 列，在大屏幕上（最多）4 列。 正如您在下面的代码中看到的，我使用了grid-template-rows: repeat(8, 1fr);

我怎样才能只给出列数而不是使用grid-template-rows: repeat(8, 1fr); ?

 .container { display: grid; grid-gap:20px; }.container >.slot { background:tomato; font-size:30px; padding:10px; } @media (min-width: 600px) {.container { grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); } }

 <div class="container"> <div class="slot">12.00</div> <div class="slot">12.15</div> <div class="slot">12.30</div> <div class="slot">12.45</div> <div class="slot">13.00</div> <div class="slot">13.15</div> <div class="slot">13.30</div> <div class="slot">13.45</div> <div class="slot">14.00</div> <div class="slot">14.15</div> <div class="slot">14.30</div> <div class="slot">14.45</div> <div class="slot">15.00</div> <div class="slot">15.15</div> <div class="slot">15.30</div> <div class="slot">15.45</div> <div class="slot">16.00</div> <div class="slot">16.15</div> <div class="slot">16.30</div> <div class="slot">16.45</div> <div class="slot">17.00</div> <div class="slot">17.15</div> <div class="slot">17.30</div> <div class="slot">17.45</div> <div class="slot">18.00</div> </div>

Answer 1

这是 Columns 而不是 CSS 网格的工作：

 .container>.slot { background: tomato; font-size: 30px; padding: 10px; margin-bottom: 20px; /* we use inline-block because block is buggy with column*/ display: inline-block; width: 100%; /**/ box-sizing: border-box; } @media (min-width: 600px) {.container { column-count: 4; column-gap: 20px; } }

 <div class="container"> <div class="slot">12.00</div> <div class="slot">12.15</div> <div class="slot">12.30</div> <div class="slot">12.45</div> <div class="slot">13.00</div> <div class="slot">13.15</div> <div class="slot">13.30</div> <div class="slot">13.45</div> <div class="slot">14.00</div> <div class="slot">14.15</div> <div class="slot">14.30</div> <div class="slot">14.45</div> <div class="slot">15.00</div> <div class="slot">15.15</div> <div class="slot">15.30</div> <div class="slot">15.45</div> <div class="slot">16.00</div> <div class="slot">16.15</div> <div class="slot">16.30</div> <div class="slot">16.45</div> <div class="slot">17.00</div> <div class="slot">17.15</div> <div class="slot">17.30</div> <div class="slot">17.45</div> <div class="slot">18.00</div> </div>

Answer 2

您可以使用grid-template-columns: 1fr; 和grid-template-columns: 1fr 1fr 1fr 1fr; .

注意：另外，您可以使用grid-auto-rows: 100px; 设置行的height 。

 .container { display: grid; grid-template-columns: 1fr; grid-gap:20px; }.container >.slot { background:tomato; font-size:30px; padding:10px; } @media (min-width: 600px) {.container { grid-template-columns: 1fr 1fr 1fr 1fr; } }

 <div class="container"> <div class="slot">12.00</div> <div class="slot">12.15</div> <div class="slot">12.30</div> <div class="slot">12.45</div> <div class="slot">13.00</div> <div class="slot">13.15</div> <div class="slot">13.30</div> <div class="slot">13.45</div> <div class="slot">14.00</div> <div class="slot">14.15</div> <div class="slot">14.30</div> <div class="slot">14.45</div> <div class="slot">15.00</div> <div class="slot">15.15</div> <div class="slot">15.30</div> <div class="slot">15.45</div> <div class="slot">16.00</div> <div class="slot">16.15</div> <div class="slot">16.30</div> <div class="slot">16.45</div> <div class="slot">17.00</div> <div class="slot">17.15</div> <div class="slot">17.30</div> <div class="slot">17.45</div> <div class="slot">18.00</div> </div>