对于CSS网格，当使用grid-auto-flow: column时，有没有一种方法来包装隐式网格？
对于CSS网格，当使用grid-auto-flow: column时，可以使用grid-auto-flow: dense来包装隐式网格。
grid-auto-flow: dense是一个CSS属性，用于指定如何填充隐式网格。当设置为dense时，浏览器会尽可能地填充网格，即使这意味着项目之间会有空隙。这种方式可以确保网格中的项目紧密排列，最大化利用空间。
使用grid-auto-flow: dense可以解决当使用grid-auto-flow: column时，项目数量不足以填满整个网格时出现的空隙问题。它会自动将项目填充到空隙中，使得网格更加紧凑。
在实际应用中，grid-auto-flow: dense可以用于各种场景，例如展示图片墙、瀑布流布局等。通过紧凑排列项目，可以提升页面的美观性和用户体验。
腾讯云相关产品中，与CSS网格相关的产品为腾讯云CDN加速服务。腾讯云CDN加速服务可以加速网站的静态资源加载，提升网站的访问速度和用户体验。具体产品介绍和使用方法可以参考腾讯云官方文档：https://cloud.tencent.com/product/cdn
相关·内容
我有一个css-grid元素，我想通过显式地指定每一项的列号和行跨度来放置我的网格项，同时让每一项的行号自动排序。 .grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.col-1 {
grid-column: 1;
}
.col-2 {
grid-column: 2;
}
.small {
grid-row: span 1;
}
.medium {
grid-row: span 2;
}
.large {
grid-row: span 3;
} <div cla
浏览 17提问于2019-06-19得票数 2
1回答
我将收到一定数量的项目显示在一个网格中，最小数量是2，但我们不知道它可以检索的最大项目数。每一项都是一列。
所以想法是，第一个项目总是显示比其他项目大，按照设计，它将有一个3fr的宽度大小，其他将有一个1 1fr大小。
我尝试了以下几点：
section {
display: grid;
grid-auto-flow: column;
grid-template-columns: 3fr repeat(auto-fill, 1fr);
}
但不起作用。因此，由于我工作的角度，我做了以下工作：
<section
*ngIf="destaques$ | async a
浏览 5提问于2021-01-08得票数 0
回答已采纳
在CSS网格中，可以使用grid-column: 1 / -1将元素扩展到整个显式网格。但是，如果您添加了新元素，并且网格自动拥有比显式声明更多的列，那么这将不会产生相同的效果。
有什么我可以代替-1的值来强迫项目一直延伸到网格的末尾吗？
在下面的示例中，由于grid-auto-flow被设置为column，所以额外的元素将添加新列。我希望.stretch元素扩展网格的整个宽度，而不仅仅是指定的3x3网格的宽度。
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr
浏览 0提问于2019-07-03得票数 4
我不认为有解决这个问题的办法，也许我应该把它作为一个特性请求发布给浏览器制造者？
我的问题是，我希望我的元素按列方向流动：
[1][3]
[2][4]
所以我写了CSS：
.selector {
display: grid;
grid-template-columns: 1fr 1fr:
grid-template-rows: auto auto;
grid-auto-flow: column;
}
现在，如果有更多的元素，我希望它自动生成更多的行，如下所示：
[1][4]
[2][5]
[3][6]
但是，网格生成了更多的列，如下所示：
[1][3][5]
[2][4][6]
浏览 3提问于2020-01-30得票数 2
回答已采纳
1回答
我们已经定义了一个带有网格的css文件，它以前运行得很好。最近，我们尝试使用CSS模块，并将文件名从声纳登陆页面更改为声纳着陆页面。module.css并像下面的代码样例一样导入js文件中，这样它就停止工作了，因为我们添加了一个简单的.error样式，比如下面的样式，红色显示得很好，但是它只是网格不工作，有人能离开一些灯吗？谢谢!
sonar-landing-page.module.css
.sonar-landing-wrapper {
display: grid;
grid-gap: 2rem;
justify-items: stretch;
align-i
浏览 2提问于2021-04-07得票数 0
回答已采纳
1回答
当试图在css网格中定位2个元素时，第二个元素溢出到下一行，即使有足够的列空间来容纳它。如照片所示：
CSS：
.grid-parent {
display: grid;
grid-template-columns: repeat(18, 1fr);
height: 100vh;
}
.map {
grid-column: 5 / -1;
}
.nav-panel-container {
grid-column: 1 / 5;
}
浏览 1提问于2020-07-20得票数 0
回答已采纳
1回答
下面或多或少是我想要的，但它并不完美:网格中有一些空白：
有没有办法避免这些差距？这能用纯CSS实现吗？请在下面找到我的HTML和CSS：
HTML：
<div class="image-canvas">
<div class='placeholder'></div>
<div class='placeholder'></div>
<div class='placeholder'></div>
<div cl
浏览 5提问于2021-09-19得票数 0
2回答
我正在尝试创建一个有序的多列列表，但我正在努力处理CSS网格布局规则。
期望的结果应该是响应性的。在小屏幕上有2个网格列，在大屏幕上最多有4个，同时保持列的顺序。
而不是像这样排序：
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15
它们应该是这样排序的：
1 5 9 13
2 6 10 14
3 7 11 15
4 8 12
我觉得我和很亲近。
ol {
margin: 0;
padding: 0;
list-style: none;
background-color: grey;
display: grid;
grid
浏览 0提问于2017-07-02得票数 9
2回答
我试图使css网格的每一列都面向对方:使其看起来像这样：
+---+---+
| A | D |
+---+---+
| B | E |
+---+---+
| C | F |
+---+---+
而不是：
+---+---+
| A | |
+---+---+
| B | |
+---+---+
| C | D |
+---+---+
| | E |
+---+---+
| | F |
+---+---+
我试着玩grid-row，我不想把它们和id放在一起
.container{
display: grid;
grid-template-columns: auto
浏览 8提问于2022-09-03得票数 1
回答已采纳
1回答
我正在做一个关于CSS网格的在线测试，我对其中一个问题感到困惑。
问题是：
假设我们有一个具有以下CSS属性的网格，其中包含4个框。如果我们在HTML中添加了第五个框，它会有多大的宽度？
这是密码：
.grid {
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 100px);
grid-auto-rows: 60px;
grid-auto-columns: 70px;
}
我的想法是:现在已经有4个框了，如果我们要添加一个新的框，它就会触发“网格-自动行”和“网格-自动列”。
浏览 0提问于2018-08-13得票数 1
当顶级子项是输入而不是div时，CSS网格布局呈现不同的原因是什么？我如何才能解决这个问题，使它们能够一致地呈现？ CSS： .container {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: auto;
grid-auto-flow: column;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
margin-bottom: 1rem;
}
.container > * {
border: 2px dashed blue;
}
浏览 25提问于2021-01-27得票数 3
回答已采纳
2回答
如何使用CSS网格并通过CSS设置列的顺序。
使用CSS网格的3x3网格示例
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1px;
}
.grid>* {
background: orange;
}
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
浏览 3提问于2021-05-20得票数 3
回答已采纳
我需要在一个宽度可变的容器中显示项目的网格。所有项目的列跨度宽度要么为1，要么为2。在纯CSS中，是否可以对项目进行动态排序，以便在没有足够的空间容纳2列宽度的项目时，移动1列宽度的项目来填充上面行中的空白？
我所拥有的最接近的工作示例是。
.box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 10px;
row-gap: 10px;
}
.box>div {
background: #ddd;
height: 80px;
浏览 0提问于2020-12-18得票数 0
1回答
我想知道Css网格是如何布局的。我以为我已经接近理解它了，直到我尝试了下面这个。
我以为它会使第5项落后于3，因为它在网格中没有定义位置，但是它却在第3项之后，它背后的行为是什么？
\
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows:
浏览 2提问于2017-12-01得票数 4
回答已采纳
如果我有一个自动流列的网格
display: grid;
grid-auto-flow: column;
所以我不知道我有多少列
我如何说“我希望所有列都是内容的最小大小，最后一列填充所有可用的空间”？
我知道，在简单的情况下，这是可以通过flexbox实现的，我正试图具体地增强我的网格知识。
浏览 2提问于2019-10-20得票数 3
我希望使用CSS网格制作一个按钮，其中的元素填充容器的全部高度：
button {
display: grid;
height: 50px;
grid-auto-flow: column;
align-items: center;
}
.one {
color: white;
background-color: purple;
border-right: 1px solid red;
}
<button>
<span class="one">one</span>
<span class="
浏览 2提问于2021-04-28得票数 1
回答已采纳
2回答
我有CSS网格来生成两列布局。但问题是，每一列中的内容并不是对齐的。
例如，在第二列中，最后一个元素应该与另一个列对齐，但与另一个列对齐--两个元素。
body>div {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-auto-flow: column;
/* https://codepen.io/maddesigns/pen/oZGWRN */
/* https://developer.mozilla.org/en-US/docs/Web
浏览 3提问于2020-12-07得票数 2
2回答
我目前正在使用CSS网格，我使用的grid-row-gap和column-row-gap很多地方。我的问题是，当执行媒体查询时，一些元素/div不能以更小的分辨率显示，我通常只是将它们设置为display: none。但是，如果我没有弄错，即使可以看到元素，行或列间隙特性仍然适用于“隐藏”元素。
有没有办法解决这个问题，还是我做错了什么？
编辑：
好吧，display: none似乎不影响网格--行间隔--这是有道理的。但是，我找到了一个小的解决办法，消除网格间隙，并在分辨率变化时添加一个填充。这似乎起了作用。
谢谢你的回答。
浏览 1提问于2018-05-14得票数 2
回答已采纳
1回答
我很难使用CSS网格功能创建下面的布局，我不确定这是否可能：
我可能会将顶部和右边的栏放在表格的网格外，但是由于网格重复部分中的列是固定的宽度，所以我还没有找到一种方法来避免在它们和侧边栏之间留下空间而不让它们拉伸。
我尝试了很多不同的东西，但都没有用。我认为解决办法应该是这样的：
.my_grid {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 300px);
}
.grid_top_bar {
grid-row-start: 1
浏览 2提问于2019-11-17得票数 3
回答已采纳
2回答
我必须在网格中制作视频，以便在移动(移动响应)中看到一个又一个的水平显示，但它们在桌面视图中应该保持垂直排列。
我尝试将行和列的值指定为auto。
return (
<div>
<h1 className="text">trending in youtube</h1>
<div className="grid-container">
<div className="one">
浏览 0提问于2019-08-11得票数 0
回答已采纳
3回答
我有这样的事情：
.row {
width: 300px;
border: 1px solid black;
display: flex;
}
.otherstuff {
flex-grow: 1;
}
.grid {
display: grid;
grid-auto-flow: column;
gap: 10px 10px;
}
.cell {
border: 1px solid blue;
}
<div class='row'>
<div class='stuff'>Stuff</d
浏览 0提问于2019-04-25得票数 10
回答已采纳
我在网格布局中有一个项目列表，网格容器有一个宽度集，但没有高度设置。
我希望这些项目填充列，直到到达容器宽度，然后包装成行。
但是现在，只有在容器上定义一个高度时，我才能让它以这种方式工作。
下面是一个片段。
除非取消对容器的height规则注释，否则网格项永远不会包装，但我希望容器在网格包装后适合增长/收缩。
.box {
height: 150px;
width: 150px;
background-color: red;
}
.container {
width: 500px;
/* height: 500px; */
background-color:
浏览 0提问于2019-03-07得票数 1
回答已采纳
1回答
CSS网格与变换的结合
、、、
有没有办法将CSS网格与转换结合起来，在网格布局中移动div？
例如，如果用户单击Box B(它将扩展到占用当前由它自己和方框C和F所持有的空间)，我如何使用转换将C和F从新占用的空间中移出，进入网格中当前无人占用的空间？
守则如下：
.grid-wrapper {
display: grid;
grid-template-columns: repeat(5, 18% 20px);
grid-template-rows: repeat(3, 30% 20px);
height: 95vh;
width: 95vw;
}
<div class="g
浏览 3提问于2017-07-03得票数 10
回答已采纳
2回答
我想让这三个盒子彼此并排显示，同时显示相同的width of 381px
他们的父母是.boxes，他们是.box
我可以在父母身上做以下的事情：
.boxes {
display: grid;
grid-template-columns: repeat(3, 381px);
}
但
如果将来我想再添加一个框，我希望.box也是381 in宽。
我不想指定数字3，如果出现新框，我希望它是381 box 的无限列
我希望取得与以下相同的结果：
grid-template-columns(auto-fit, 381px);
但是，如果它们不适合，我不希望它们包装到下一行。
有
浏览 1提问于2020-08-24得票数 1
回答已采纳
我有一个“选择/匹配”的问题，我需要将选项放在一个列中，在另一个列中使用网格css进行匹配，我的问题是匹配列是重叠的。
这就是现在的样子：
.grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
}
.grid>div{
padding:12px;
margin:0;
color:#fff;
background:#222;
}
.choice{
grid-column-start: 1;
}
.match{
grid-column-start:2;
grid-row-
浏览 5提问于2022-05-06得票数 1
回答已采纳
我使用网格自动列创建了一个网格布局。我正在寻找的需求如下：
默认情况下，网格将equally.Ability列划分为控制columns.Ability的顺序，以控制特定列的宽度，其余的列平均占用空间。
网格容器css是：
.gridLayout {
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
html标记如下：
<div class="gridLayout">
<div class="gridSection textHolder">
浏览 0提问于2022-10-05得票数 1
回答已采纳
1回答
假设我有大约250个slider-item类样式的div。我在css A中有一个响应网格，它将div包装为列/项作为窗口缩放。下面列出的最小项宽度为240px。
我试图保持网格响应在一行(现在溢出水平)。问题是属性grid-template-columns: repeat(auto-fill..)增长/缩小行b/c，div超过当前窗口宽度。
A
.slider-content {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
o
浏览 0提问于2020-10-18得票数 0
回答已采纳
1回答
我试图使用CSS网格创建一个布局，比如图像(任何项目都是正方形的)：
我正在尝试的代码：
CSS
.grid-container {
padding: 20px;
display: grid;
grid-gap: 20px;
grid-auto-rows: 1fr;
grid-template-columns: repeat(2, 1fr);
}
.item {
position: relative;
background: #ccc;
}
/* Square */
.item:after {
浏览 0提问于2020-02-06得票数 6
回答已采纳
这个问题有两个部分，因为我冒险玩CSS网格.
_
1.你能像在Flex?中的方向一样翻转一个CSS项(行)吗？
我有一个网格/行，主要是两个并排的div。我知道我可以在另一个用例中使用flex，但是这里我需要使用CSS。每一个交替的行都会被翻转，所以图像就在另一边。没有flex，我能用CSS实现这一点吗？
我想我可以指定每个块应该从哪些列开始，哪个列将位置移动到正确的位置。问题是，所有的内容都挤进了一个非常狭窄的专栏。
示例：
我以为黑客可以在父母身上使用direction: rtl，然后将所有子元素的方向切换回来--但这似乎有点混乱，而且可能对此不屑一顾吗？
_
2.子元素也能遵循相同的网
浏览 1提问于2021-05-26得票数 0
我想使用CSS布局(理想情况下使用显式列网格)。我希望有一个灵活的项目，吸收任何额外的空间沿x轴/跨越的列，而不是其他项目使用。
完美的解决方案将是使项目跨所有未占用的列(类似于flex-属性)的属性，但我想这在CSS-Grid中是不可能的。
我试着做一个例子：
下面的布局使用定位在网格上的几个元素。我希望有一个灵活的标题，吸收任何额外的空间在右边，如果项目在"aside1“被削减。
.grid{
display: grid;
grid-template-columns: none 1fr 1fr none;
grid-template-areas: &#
浏览 3提问于2017-12-13得票数 6
回答已采纳
1回答
加法
<div class="md:grid-flow-col">
什么都没发生。这是因为当我浏览文档时，md:grid-flow-col没有包含在顺风css中。
在我的styles.css中，我可以看到用于顺风的所有类。例如：
.md\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-5{
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.md\:flex-r
浏览 12提问于2022-10-31得票数 -1
1回答
我正在尝试创建一个水平滚动的小部件。它很像一个图像传送带，但使用的是文本和图标。
它将有多列，但一次只有一列可见。其余的将使用overflow: hidden。
为了使列的大小相等，我使用css-grid。例如，这将使3个宽度相等的列：
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow:column;
然而，我想知道是否有一种方法可以将网格本身限制为一列宽。所以网格是一列宽的，每列当然也是一列宽的。
结果是在3列布局上，这2列溢出，它们可以被隐藏。
如果不在网格本身上设置"px“宽度，我不确定这是否可能。
浏览 10提问于2021-03-11得票数 0
1回答
我正在从列表到网格插入项目。 当我插入具有相同网格列的两个项目时，它会一个接一个地插入(这很好)。但是如果下一项可以放在行的顶部，我想把它放在那里。 .container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(7, 1fr);
}
.item1 {
grid-column: 3 / 4;
background-color: coral;
}
.item2 {
grid-column: 5 / 5;
background-color: red;
} <div cla
浏览 21提问于2021-10-20得票数 1
回答已采纳
我正在尝试创建类似netflix滑块的东西。现在，我有一个单行网格容器，溢出设置为auto，我希望在任何时间点显示5个列。我使用javascript动态计算容器的宽度，这样我就可以使用导航按钮平滑地滚动条目，也可以使用trackpad (或touchpad)自由滚动。然而，我很难让网格容器完美地对齐，而且网格间隙属性正在破坏网格容器中子容器的对齐。现在给您看一下我的代码片段：
.container{
display: grid;
grid-gap: 0.75rem;
grid-auto-flow: column;
grid-auto-columns: 20%;
over
浏览 1提问于2022-09-13得票数 1
1回答
我正在研究grid-auto-flow上的MDN 提供的示例，以了解CSS网格中的自动布局算法是如何工作的。
下面是如何定义示例(您可以在这里更改select grid-auto-flow选项以更改属性的值)：
function changeGridAutoFlow() {
var grid = document.getElementById("grid");
var direction = document.getElementById("direction");
var dense = document.getElementById("
浏览 23提问于2020-10-04得票数 3
回答已采纳
1回答
我试图做两列的平面随机项目列表布局，其中一些应该在左边，一个在彼此之下，另一些在右边。
到目前为止，我使用的是css网格，但是我对“空行”有一个问题，因为这些单元格不知道“从上开始”。
如果我把所有的grid-row-start: 1加在一起，它们都会在顶部塌陷。
我不想改变容器的结构，因为我只想洗牌类来移动项目。理论上，我可以在row-1、row-2等JavaScript中添加类，并使用它来确定单元格应该从何处开始，但我想知道是否有一种更干净的方法来纯粹在css中处理这个问题。
演示：
浏览 1提问于2018-11-09得票数 2
回答已采纳
2回答
我正在为我的网站构建一个使用CSS网格的服务列表。整个网站网格中的一行被分成两个CSS列。
在第一行的第一列中，有服务的描述。在第二列中，有一个表示服务的图像。
对于每一行，描述和图像交替，因此在第二行，第一列，有一个图像，在第二列中，有一个描述。查看附加的图片，看看到目前为止，我有什么工作(注意:我调整大小的图像，使它更容易拍摄截图)。
CSS网格的移动版本是一列。当我在移动版本中显示相同的内容时，布局就不再工作了。因为我的布局是由HTML内容决定的(我知道这可能是件坏事)，标题并不总是显示在图像上方，这就是我想要的。请参阅附件以查看问题。
我相信解决这个问题的答案在于使用flex-dire
浏览 5提问于2020-03-04得票数 2
回答已采纳
我正在与CSS网格工作，并希望创建以下布局。在包装器中可以有n个元素。当我们将鼠标悬停在它们上面时，它会增加高度并显示更多信息。推送同一个column中的元素。请参考下图。
我不能用下面的CSS实现
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
grid-gap: 20px;
align-items: start;
}
请帮帮我！
浏览 0提问于2019-08-19得票数 0
1回答
我使用CSS网格作为布局。基本上，我想要做的是让项目显示为一个网格，但按数字顺序。举下面的例子：
.list ul {
display: grid;
grid-template-columns: auto auto auto;
list-style-type: none;
font-size: 20px;
}
.list li {
padding-bottom: 20px;
}
<div class="list">
<ul>
<li>1</li>
浏览 1提问于2018-01-12得票数 4
回答已采纳
我正在尝试实现以下布局：
如您所见，中间列中的卡片占据多个网格，以便产生这种效果。
我所拥有的：
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". . ."
". . ."
". . .";
}
.grid-item {
border: 1px solid black;
}
浏览 2提问于2021-12-17得票数 0
回答已采纳
我正在学习CSS，并试图复制一些灵活的行为(我知道两者是互补的，这是一个学习练习)。
下面的flex示例允许堆叠未定义数量的div(未定义，因为它们的数量不会影响CSS部分)
#flex {
height: 100px;
display: flex;
flex-direction: row;
}
#flex > div {
background-color: blue;
}
<div id="flex">
<div>a</div>
<div>b</div>
<div>
浏览 5提问于2018-01-04得票数 5
2回答
我一直在使用CSS Grid，并在下面的<section>中做了一个<section>，它将图像放在文本旁边，并颠倒了列的顺序。
当屏幕变小时，我希望图像始终显示在文本的上方。
我现在有这个工作，但CSS看起来真的杂乱无章，我一直在努力使它更短，我认为这应该可以与CSS网格。
.color:nth-child(odd) {
background-color: red;
}
.color:nth-child(even) {
background-color: green;
}
section {
background: black;
padding
浏览 2提问于2017-12-18得票数 0
回答已采纳
1回答
CSS网格被忽略。
、、、
嗨，在几个星期的练习中，我对HTML和CSS还比较陌生，我在以前的项目中成功地使用了网格，但是现在当我尝试使用grid: display时，我已经被困住了；它现在被忽略了。
#container{
display: grid;
grid-template-areas:
"navbar content";
grid-auto-flow: column;
grid-template-columns: 1fr 3fr;
justify-content: center;
}
#main-doc{
}
#main-title{
grid-area:
浏览 1提问于2021-01-09得票数 0
我有一个动态列表的项目，我想显示。我希望它们填充网格的第一行，根据需要添加列，直到行适合容器为止。接下来，它应该填充第二行，然后填充第三行，等等。我不关心顺序，但是最好从上到下依次显示项目，如下所示：
1 4
2 5
3 6
父容器没有固定的高度。应该是这样的：
这是可行的，但我必须显式地指定行数。是否有一种不显式指定行/列的方法来做到这一点？
下面是我希望网格填充的顺序：
第一：
1 2 3 4 |
下一步(第一行不再有空间)：
1 3 5 7 |
2 4 6 8 |
下一步(第二行不再有空间)：
1 4 7 10 |
2 5 8 11 |
3 6 9 12 |
浏览 8提问于2017-06-17得票数 4
回答已采纳
我正在开发一个小部件，它将显示多达8篇文章，垂直分布在两列上。如果这个小部件显示少于4篇文章，我想避免额外的空间。我尝试了大量的东西，但没有成功，由于我不太熟悉脚本，我想避免它们，如果它可以做到没有它们。
到目前为止，这就是我所拥有的：
article {
background: lightblue;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 1em;
grid-auto-flow: column
浏览 3提问于2021-02-18得票数 3
回答已采纳
9回答
CSS网格中的等宽列
、、、
我想让下面的html在n个相等的列中使用css网格显示行元素是否有两个、三个或更多的子元素- Flexbox使这一点变得很容易，但我不能使用css网格完成它-任何帮助都非常感谢。
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
浏览 2提问于2017-12-02得票数 78
1回答
如何将网格呈现为类似的表
、、、
需要将网格呈现为类似于表的格式，例如，我最初有两行，后面跟着css：
步骤1:
.grid-container {
display: grid;
grid-template-columns: auto;
background-color: #2196F3;
padding: 10px;
}
输出
我动态地添加了一个列，但它的呈现方式与其正确的下面类似，但我需要逐行呈现css中任何棘手的颜色。请指导什么是实现的方式。
我有一个想法，就是基于顺序会呈现网格，就像其他选项一样，
步骤2:
.grid-container {
display: grid;
浏览 5提问于2019-09-20得票数 0
回答已采纳
我试图确定CSS网格是否能够自动地在列和行级别上排列彼此错开的项。
很难准确描述我想要的内容，因此这里有一个例子，说明这样一个网格的外观，考虑到项目的顺序是正确的(所以不一定按照我当前在HTML中的顺序)：
.grid{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
column-gap: 20px;
row-gap: 20px;
justify-content: center;
}
.grid div{
background-col
浏览 7提问于2021-12-10得票数 1
回答已采纳
1回答
我希望有一个CSS网格，它逐列呈现项目，其中没有假定最大的列数和行数。我有一些我能想出的最好的版本，尽管我希望有一些不需要的解决办法：
.grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(4, 1fr);
}
.item {
margin: 1em;
}
.column {
display: contents;
}
.clear {
grid-row-end: -1;
}
<div class="grid">
<div clas
浏览 1提问于2020-10-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
