为n个带有空格的元素重复CSS网格布局

CSS网格布局是一种用于创建网页布局的强大的CSS模块。它提供了一种灵活的方式来定义网页的结构和排列，使得开发人员可以轻松地创建响应式和复杂的布局。

CSS网格布局的主要概念是将网页划分为行和列的网格，然后将元素放置在这些网格中。通过使用网格容器和网格项，可以实现对元素的精确定位和对网页布局的细粒度控制。

优势：

灵活性：CSS网格布局提供了灵活的布局选项，可以轻松地调整和重新排列元素，以适应不同的屏幕尺寸和设备。
响应式设计：CSS网格布局可以根据不同的屏幕尺寸和设备自动调整布局，使网页在各种设备上都能良好地显示。
精确控制：通过定义网格行和列的大小和位置，可以精确地控制元素的布局和对齐方式。
可重用性：CSS网格布局可以应用于整个网页或特定的区域，使得布局代码可以在不同的页面和项目中重复使用。

应用场景：

响应式网页设计：CSS网格布局非常适合用于创建响应式的网页布局，可以根据不同的屏幕尺寸和设备自动调整布局。
复杂布局：对于需要复杂布局的网页，如新闻网站、电子商务网站等，CSS网格布局提供了灵活的选项来实现复杂的网页结构和排列。
网格系统：CSS网格布局可以用于创建网格系统，使得网页的各个部分可以按照网格进行对齐和布局。
网页应用程序：对于需要精确控制元素位置和布局的网页应用程序，如仪表盘、数据可视化等，CSS网格布局是一个理想的选择。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云CSS网格布局指南：https://cloud.tencent.com/document/product/249/30729
腾讯云Web+：https://cloud.tencent.com/product/webplus
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn

请注意，以上链接仅为示例，实际的产品和链接可能会有所不同。

为n个带有空格的元素重复CSS网格布局

html、css

我想得到一个CSS网格，其中有很多空白(空单元格)的项目。为此，我希望每个第n+x个项目都填充一个特定的位置，这样它们就可以漂亮地对齐。有一天它应该是什么样子的一个例子：在下面的代码示例中，我做了一个非常粗略的示例，它设置了三个不同的区域和一些不应该填充的空格，因为我显式地放置了每个.item。我希

浏览 4提问于2019-07-16得票数 0

1回答

如何利用css网格实现响应式布局

css-grid

我希望使用响应性的css网格在figure1中实现布局。元素A，B，C，D，E-有不同的内容(内容与下图中的方框大小成正比)我试图定义具有重复、自动填充和适配内容的网格模板列，但我没有得到想要的结果--我遇到了解释如下的链接自动重复(自动填充或自

浏览 2提问于2019-09-21得票数 1

回答已采纳

1回答

Css网格可伸缩性

css、css-grid

我最近开始使用css网格来创建一个网站的布局。我为主页做了一个漂亮的模板。当我开始开发网站并添加页面时，我很快意识到，我需要为每个页面的内容建立一个网格。虽然这不是一个大的问题，这个项目只有3-4页，我可以看到这变得很难管理与更大的网站，有不同的布局为每一页。使用网格似乎迫使您为每个页面的内

浏览 0提问于2018-04-10得票数 1

回答已采纳

3回答

CSS语法：".one.column“".two.column"，我没看错吧？

html、css、syntax、css-selectors

我刚刚发现了Skeleton样板，它使用网格。这是github上的css：我以前没有在CSS中看到过这种语法。假设.one.columns {}与.one, .columns {}不同，前者只影响带有class="one columns"的元素，而后者影响带有class="one"和cl

浏览 2提问于2012-07-26得票数 0

回答已采纳

1回答

带有css网格的双轴表布局

html、css、layout、css-grid

像或这样的资源是很棒的，但是我不知道如何构建两个轴的表布局。这个布局的数据是一个简单的每周时间表，其中每一天都有一个0-n类别，每个类别都有0-n菜肴。“布局- in”，就像css-网格的咒语一样，以一种与目标布局分离的方式构造html。然后，我尝试为每个

浏览 0提问于2018-02-04得票数 3

1回答

我需要媒体查询的行为来更改各个div中的布局

css、media-queries

通过使用CSS3媒体查询，“我的网站”的网格布局将相对于“浏览器”视口的宽度进行更改。但现在我正在寻找一种方法来改变我网格中特定块的布局。因此，它们的行为与其父元素的宽度不同。例如，如果父元素的宽度为+500px，我可以显示带有缩略图的标题，如果父元素的宽

浏览 0提问于2011-12-01得票数 2

2回答

角方盒布局

javascript、html、css、angularjs

我试图使用ng重复项上的css实现正方形网格布局。.container{} float: left; margin: 3px;height:

浏览 6提问于2017-03-04得票数 3

回答已采纳

3回答

像“空白:没有”之类的吗？

css、whitespace

可能重复：有没有办法使空格不呈现在CSS中？

浏览 5提问于2012-12-10得票数 4

回答已采纳

2回答

什么是引导中的.d-网格类？

twitter-bootstrap

我正在使用引导v5.1的块按钮，我使用d-grid使我的按钮响应。

浏览 7提问于2022-01-09得票数 2

回答已采纳

1回答

当实现不基于网格的设计时，CSS网格系统如何节省时间？

css、photoshop、twitter-bootstrap、css-frameworks

什么CSS网格系统做的很快，而我们不能没有他们？这些天来，twitter引导程序在社区中很流行，它基于940 in宽度网格和其他功能，也适用于按钮和jquery插件。我的问题是专

浏览 5提问于2012-02-01得票数 2

回答已采纳

0回答

如何在React中有效地使用CSS网格布局？

css、reactjs、single-page-application

我目前正在使用ReactJs和CSS网格布局构建一个单页面应用程序，用于组件的放置和样式。举个例子： React组件树: App > ToD

浏览 12提问于2017-06-07得票数 8

1回答

通过元素映射时的CSS网格布局

css、reactjs、css-grid、grid-layout、map-function

我想实现一个响应式的网格布局，如下所示： ? 我使用map()来映射来自db的帖子数组，并显示所有的帖子，但是我不确定如何使用我的代码进行网格布局。我目前有一个简单的网格布局，每行有3列(因此每行有3张卡)，但是我想在中间一列有3张小卡，如图所示。为了做到这一点，我通常会创建另一个嵌套的div，并适当地设置它的样式。有没有办

浏览 10提问于2020-07-18得票数 1

回答已采纳

1回答

缩略图网格-使用奇点

singularitygs

我的列表中剩下的一件事是使用奇异创建一个缩略图(或任何其他元素)网格。换句话说，一组重复的元素，从左到右流动，在网格的每一列中都有一个元素，然后在新行上继续，再次在第1列上。假设网格是12列，大屏幕大小(使用断点)，8列为中等屏幕大小，6列为小屏幕大小。我是否正确地认为这样的事情可以使用nth-of type

浏览 3提问于2015-05-31得票数 1

1回答

CSS网格:如何将同一网格区域中的元素对齐？

css、layout、masonry、css-grid

我的目标是使用CSS网格布局的两列砖石布局的盒子。给定一个带有子元素的元素： <div></div> <div></div> <div>

浏览 1提问于2017-03-09得票数 9

2回答

CSS网格内的Textarea大小

html、css、css-grid

我试图使用隐式CSS网格为以下基本HTML结构生成布局： <textarea></textarea></div>.row { disp

浏览 1提问于2020-02-02得票数 0

1回答

React + CSS Grid + MongoDB？

html、css、reactjs、mongodb、gridview

我正在创建一个网页，用户可以在其中张贴东西到“公告牌”。这些帖子将被设置为框的样式，我想将它们添加到网格布局中。我一直在研究CSS Grid文档，我想知道是否足够让我的代码保持原样，并创建一个带有id #库的css文件来设置网格的属性(显示、网格间隙、重复等)。这样就足够了吗，或者我必须更改我的displayB

浏览 2提问于2020-05-24得票数 0

1回答