如何调整网格中第一个自动列的大小？答案

【问题标题】：How to resize first auto column in grid?如何调整网格中第一个自动列的大小？
【发布时间】：2021-10-06 09:58:04
【问题描述】：

我正在尝试调整在 google 上搜索的网格中第一列的大小，但找不到解决方案。我可以用 css 做到这一点，但想学习如何调整网格中重复列的大小。

我希望第一张卡片是 width: 50%; 和另外两张卡片 width:25%; 和 width:25%;

这是我的代码

.slider-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin-bottom: 40px;
}

.slider-cards img {
  width: 100%;
  margin-bottom: 20px;
}

.slider-cards h3 {
  margin-bottom: 5px;
}

.slider-cards a {
  display: inline-block;
  padding-top: 10px;
  color: #0067b8;
  text-transform: uppercase;
  font-weight: bold;
}

.slider-cards a:hover i {
  margin-left: 10px;
}

    <div class="slider-cards">
      <div class="first">
        <img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
        <h3>The Conversation has reported</h3>
        <p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
      <div class="second">
        <img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
        <h3>The Conversation has reported</h3>
        <p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
      <div class="third">
        <img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
        <h3>The Conversation has reported</h3>
        <p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
    </div>

：

【问题讨论】：

设置每列的宽度grid-template-columns: 50% 25% 25%;

标签： html css grid

【解决方案1】：

对于您或任何 Web 开发初学者的最佳建议是学习和掌握引导程序。 Bootstrap 是一个针对响应式、移动优先的前端 Web 开发的免费开源 CSS 框架。它包含基于 CSS 和 JavaScript 的设计模板，用于排版、表单、按钮、导航和其他界面组件。（这意味着它本质上是预设的 CSS 类，您只需编写预设的类名即可将其合并到您的 div 中）

任何 col 跨度的标准跨度是 12。这意味着您可以使用这些预设 col 类解决问题以获得所需的间距。例如，如果您希望某些内容覆盖整个网页，您可以使用<div class="col-12">content</div>，第 12 列覆盖整个屏幕。要吐出屏幕的一半和一半，您可以使用<div class="col-6">content</div> 来处理跨越整个屏幕的两个 div，每个 div 占 50%。所以在这种情况下是两个 div。

对于此示例，您需要一个 3 列网格，其中第一个跨度为 50%，第二个和第三个跨度为 25%。 Bootstrap 具有名为 col 的预设类。您可以使用导入功能简单地将引导框架@import 导入到您的任何文档中。所以为了达到你想要的结果，你的结构如下：

.slider-cards {
  display: flex; /* changed from grid */
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin-bottom: 40px;
  width: 100%; /* want cols to span 100% width of container */
}

.slider-cards img {
  width: 100%;
  margin-bottom: 20px;
}

.slider-cards h3 {
  margin-bottom: 5px;
}

.slider-cards a {
  display: inline-block;
  padding-top: 10px;
  color: #0067b8;
  text-transform: uppercase;
  font-weight: bold;
}

.slider-cards a:hover i {
  margin-left: 10px;
}

<!doctype html>

<head> <!-- either will work, but this is both -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<html>

<div class="slider-cards">
    <div class="row">
      <div class="col-6"> <!-- 50% width -->
        <img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
        <h3>The Conversation has reported</h3>
        <p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
      <div class="col-3"> <!-- 25% width -->
        <img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
        <h3>The Conversation has reported</h3>
        <p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
      <div class="col-3"> <!-- 25% width -->
        <img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
        <h3>The Conversation has reported</h3>
        <p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
    </div>
</div>

</html>

【讨论】：

bootstrap 很好，但它包含大量导致渲染阻塞和播放负载等的 css 和 js，我更喜欢使用我自己的最小代码。感谢您的建议。
有办法解决这个问题。请在此处查看：stackoverflow.com/questions/38000675/… 如果您更喜欢自己的代码，那就另当别论了。但是，Bootstrap 已经尽可能地小了。
正如我所说我不想使用引导程序，我的解决方案是如此简单.first { grid-column: 1 / span 2; }再次感谢