小编Atu*_*put的帖子

使用 flexbox 控制连续的项目数

我想在第一行显示 4 个项目,但在第二行只显示 3 个,然后在第三行显示 4 个,在第四行显示 3 个,依此类推...

我已经实现了这一点,nth-child但是代码太多而且不灵活和可扩展。

flex 可以吗?或网格?

* {
  box-sizing: border-box;
}

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-wrapper .grid-item {
  width: 25%;
  text-align: center;
  padding: 5px;
}

p {
  background: #ddd;
  padding: 15px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="grid-wrapper">
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

5
推荐指数
1
解决办法
4432
查看次数

如何在 CSS 网格中的行之间设置不同的列宽?

我需要创建如所附图像所示的网格项。第一项需要为 45%,第二项和第三项需要为 52.5%,其余项需要各为 50%。我无法更改 HTML,因为所有网格子项都来自循环。所以我无法通过编写的CSS来实现它,检查代码片段,通过我的CSS,它只能使左侧所有项目的宽度为50%或45%,但是如何将项目的宽度从4更改为其余的项目。

是否可以在不更改 HTML 的情况下实现?

在此输入图像描述

.atul {
  display: grid;
  grid-template-columns: 45% 52.5%;
  grid-template-rows: auto;
  grid-gap: 2.5%;
  grid-template-areas: "card1 card2" 
                       "card1 card3";
}

.card:nth-child(1) {
  grid-area: card1;
}

.card:nth-child(2) {
  grid-area: card2;
}

.card:nth-child(3) {
  grid-area: card3;
}
Run Code Online (Sandbox Code Playgroud)
<div class="atul">
  <div class="card" style="background-color: red;">Card 1</div>
  <div class="card" style="background-color: green;">Card 2</div>
  <div class="card" style="background-color: yellow;">Card 3</div>
  <div class="card" style="background-color: skyblue;">Card 4</div>
  <div class="card" style="background-color: skyblue;">Card 5</div>
  <div class="card" style="background-color: skyblue;">Card 6</div>
  <div class="card" style="background-color: skyblue;">Card 7</div>
  <div class="card" style="background-color: …
Run Code Online (Sandbox Code Playgroud)

html css grid css-grid

2
推荐指数
1
解决办法
7098
查看次数

标签 统计

css ×2

html ×2

css-grid ×1

flexbox ×1

grid ×1