时间戳

首页 > 解决方案 > 如何调整网格中第一个自动列的大小？

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

问题描述

我正在尝试调整在谷歌上搜索的网格中第一列的大小，但找不到解决方案。我可以用 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>

：

标签： htmlcssgrid

解决方案

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

任何 col 跨度的标准跨度是 12。这意味着您可以使用这些预设 col 类解决问题以获得所需的间距。例如，如果您希望某些内容覆盖整个网页，您可以使用<div class="col-12">content</div>跨越整个屏幕的第 12 列。要吐出屏幕的一半和一半，您将使用<div class="col-6">content</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>

推荐阅读