相关疑难解决方法(0)

根据动态内容计数居中 CSS 网格项目

我有一系列从数据库中获取的图像，当添加三个或更多图像时，它会直观地显示三列。

当存在的图像少于三个时，因为我正在使用display: grid;它，所以它当前位于父容器的左侧（在代码示例中，我刚刚使用红色框来表示图像）。

无论如何，是否有这样的设置，以便当存在一两个图像时，这些图像可以对齐到父元素的中心。我很感激我可以使用 javascript 来检测存在多少图像，如果少于三个，则添加一个类并将包装器更改为display: flex，但我想知道仅使用 CSS 是否可以实现这样的布局？

由于布局的性质，当存在三个以上图像时，我确实需要使用 CSS 网格。

注意：我已注释掉 HTML 中的两个红色框，以显示仅存在一个红色框时的初始问题。

代码笔：https ://codepen.io/anna_paul/pen/xxXrVJQ

body {
  display: flex;
  justify-content: center;
  margin: 0
  width: 100%;
  height: 100vh;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  max-width: 1250px;
}

.box {
  width: 200px;
  height: 200px;
  background: red;
}

Run Code Online (Sandbox Code Playgroud)

<div class="wrapper">
  <div class="box"></div>
<!--   <div class="box"></div>
  <div class="box"></div> -->
</div>

Run Code Online (Sandbox Code Playgroud)

html css css-grid

Pau*_*12_

2021 12-19

7
推荐指数

1
解决办法

1445
查看次数

CSS"margin:0 auto"不居中

好的,我知道这个主题已被涵盖.但是我已经研究过各种解决方案并且几乎没有成功.

我不知道为什么这margin: 0 auto;不起作用.我尝试补偿填充width: calc(33% - 40px);,但这不起作用.

任何帮助解决为什么会这样,解决方案将不胜感激!

.container {
  margin: 0 auto;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>

    <div …

Run Code Online (Sandbox Code Playgroud)

html css centering

JP *_*ter

2017 04-03

6
推荐指数

1
解决办法

2万
查看次数

使用Grid很难或不可能实现Flexbox涵盖的哪些领域？

突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是

但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。

我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。

以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。

Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？

编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）

css flexbox css-grid

WoJ*_*WoJ

2019 03-09

4
推荐指数

2
解决办法

217
查看次数

如何使用 Tailwind CSS 将网格最后一行的项目居中？

尝试使用 Tailwind（使用 React）在网格布局中对齐我的最终项目时遇到问题。基本上我想要 3 个项目，如果没有剩下 3 个项目，即 2 或 1，我希望它们居中。

我尝试过某种 col span，但没有按预期工作。

为了更好地说明我正在尝试做的事情，我附上了一些图表

当前布局：

所需的布局，其中剩余 2 项：

剩余 1 项的所需布局：

<div className="xl:grid grid-cols-3 gap-4">
 //cards .map(item) 
</div>

Run Code Online (Sandbox Code Playgroud)

html javascript css reactjs tailwind-css

vor*_*ies

2023 04-30

4
推荐指数

1
解决办法

1535
查看次数

在整个行/列中对齐网格项(如弹性项可以)

使用弹性容器和flex-wrap: wrap设置,您可以使用溢出的项目与中心对齐justify-content: center.

有没有办法使用CSS网格实现相同的行为溢出网格项？

我创建了一支显示所需弹性行为的笔

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

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

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

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}

Run Code Online (Sandbox Code Playgroud)

<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div> …

Run Code Online (Sandbox Code Playgroud)

css css3 flexbox css-grid

Has*_*ect

2018 05-17

3
推荐指数

1
解决办法

1020
查看次数