如何使第一个网格项目跨度为100％？ [英] How do I make the first grid item span 100%?

问题描述

对于台式机，我有以下内容，它创建了4个相等的列，全部占25％。

I have the following for desktop, which creates 4 equal columns all at 25%.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

但是，如何在媒体查询中调整它们的大小，以使第一列达到100％，其余列自然地包裹在下面，现在仍然使用CSS网格达到33.333％？

However, how can I resize these in a media query to make the first column go 100% and the rest of the columns naturally wrap underneath and now be 33.333% still using CSS grids?

.footer-inner {
  display: grid;
  grid-template-columns: 100% 1fr 1fr 1fr; 
  /* AND THIS */
  grid-template-columns: 100% 33.333% 33.333% 33.333%;
}

推荐答案

将网格更改为三列并将第一个div设置为在适当的位置将它们全部覆盖。

Change the grid to three columns and set the first div to span them all at the appropriate point.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer-inner div {
  border: 1px solid grey;
  text-align: center;
}

.footer-inner :first-child {
  grid-column: 1 / -1;
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

这篇关于如何使第一个网格项目跨度为100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！