时间戳

首页 > 解决方案 > 如何使第一个网格项目跨度 100%？

html - 如何使第一个网格项目跨度 100%？

问题描述

我有以下桌面，它以 25% 创建 4 个相等的列。

.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%，其余列自然地包裹在下面，现在 33.333% 仍在使用 CSS 网格？

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

标签： htmlcsscss-grid

解决方案

将网格更改为三列，并将第一个 div 设置为在适当的点跨越它们。

.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>

推荐阅读