首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在css中指定数量的项目后重新启动网格列?

在CSS中,可以使用grid-column属性来指定网格项目的位置。如果要在指定数量的项目后重新启动网格列,可以使用grid-columnspan关键字来定义项目的跨度。

具体步骤如下:

  1. 首先,为网格容器添加display: grid;属性,将其设置为网格布局。
  2. 使用grid-template-columns属性来定义网格列的大小和数量。例如,grid-template-columns: repeat(3, 1fr);表示将网格分为3列,每列的宽度相等。
  3. 在网格项目中,使用grid-column属性来指定项目所占的列范围。例如,grid-column: span 2;表示该项目跨越2列。
  4. 如果要在指定数量的项目后重新启动网格列,可以使用grid-columnauto关键字。例如,grid-column: auto;表示该项目将重新启动一个新的列。

以下是一个示例代码:

代码语言:txt
复制
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  grid-column: span 2;
}

.grid-item:nth-child(3n+1) {
  grid-column: auto;
}

在上述示例中,.grid-container是网格容器的类名,.grid-item是网格项目的类名。通过grid-column: span 2;,前两个项目将跨越2列。而通过grid-column: auto;,第三个项目将重新启动一个新的列。

这样,你就可以在CSS中指定数量的项目后重新启动网格列了。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS Grid 那些鲜为人知内幕

Grid vs Flex Grid 布局与 Flex 布局有一相似性,都可以指定「容器」内部多个「项目位置。但是,它们也存在重大区别。...❞ 一个网格区域可能由「任意数量网格单元组成」。 在这个例子中,这是位于行网格线 1 和 3 之间,以及网格线 1 和 3 之间网格区域。...容器高度固定 当我们将容器高度固定,在这种情况下,其内部项目的高度会「均分」容器高度。也就是当拥有多个项目时它们被分成大小相同行。 4. 创建网格单元 默认情况下,Grid将创建单列布局。...❝grid算法希望确保「每个子元素都有自己网格单元」。它会根据需要「生成新行来实现这个目标」。 ❞ 这在我们有可变数量项目并且我们希望容器自动排布项目的情况下非常方便。...也就是说,当网格具有固定数量行和时,areas效果最佳。grid-column 和 grid-row 可以在隐式网格中很有用。

15710

css grid 布局那些事儿

如今,设计师和开发人员正在使用各种布局系统, Flexbox 甚至纯 CSS 来创建令人惊叹响应式网站。但是当涉及到某些任务时,这些方法中每一种都有其自身局限性。...CSS Grid 独一无二功能 提供使用基于行定位将项目放置在网格能力。这使得创建非常复杂布局成为可能,而无需使用传统浮动或绝对定位。 提供跨越和行能力。...换句话说,您可以拥有跨越多或多行项目。 提供通过使用行号和名称或通过定位网格特定区域将项目放置在特定位置能力。还包括一个算法来控制未明确放置在网格项目的放置。...提供控制项目放置在网格区域内如何对齐以及网格整体对齐方式能力。 提供使用像素创建使用固定轨道大小网格能力 - 将网格设置为适合您所需布局指定像素。...50% 33.33% 25%; } 在布局中指数和行数,您可以使用 grid-column 和 grid-row 属性将元素放置在这些和行中。

2.1K30
  • 开发人员必备:9个令人惊叹CSS网格生成器推荐!

    创建开源项目。...它是一个非常有用工具,可以利用其实用CSS Grid功能创建动态布局。此外,它还可以让我们设置和行数量和单位。 此CSS生成器非常容易通过在网格内拖动方框来创建分区。...它允许我们添加任意数量网格和行,并且还可以设置它们之间间距。 你可以使用这个网格生成器轻松构建响应式布局,完成还可以在Codepen中生成代码。...它确实有一些依赖项,Hashids、Nuxtjs和Vue Awesome库。 此外,它具有非常清晰易懂结构,我们可以轻松地添加行和,并相应地调整它们之间间距。...它有一个非常简单界面,您可以在其中设置行数和数,然后选择要放置网站元素区域。 此外,你可以创建多达20行和网站布局。当您完成网格创建,可以直接获取上述示例中显示CSS代码。

    3.7K30

    CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。Grid(网格) 布局使我们能够将网页分成具有简单属性行和。...你会看到 fr 单位是将 总尺寸 减去 单元格明确尺寸,在等分剩余空间。 grid-gap 是间隔。 repeat() 函数 在某些情况下,我们可能有很多和行。...这是它语法: CSS 代码: grid-template: ro ws / co lu mns; 我们上面的例子使用这个简写语法,看起来非常整齐。...您也可以使用 span 关键字和占据 轨道数量,来代替指定 grid-row-end 和 grid-column-end 结束网格线编号。在这种情况下,第6个框是跨越 2 和 1 行。...我们还学习了如何使用网格线和网格命名区域在网格容器内定位网格项目。但这只是一个开始。在下一个教程中,我们将深入到CSS网格

    1.9K10

    分享 10 个 常用且必须要掌握 CSS 知识点

    CSS 网格布局在将大型网页划分为小组件并根据大小、位置和优先级或重要性定义这些组件之间关系方面做得非常出色。 此外,CSS 网格布局有点类似于表格,因为它像表格一样将大布局划分为行和。...1)grid-template-columns属性: grid-template-columns 属性定义了网格布局中数量和宽度。 这是一个示例,我们创建了 4 个等宽。...应用于网格项目的属性: a) grid-column 属性: grid-column 属性用于设置网格容器中元素开始和结束。...例如,如果一个项目的 grid-column 属性设置为 1 / 5,这意味着该项目网格第 1 行开始,到网格第 5 行结束。可以使用像 1/ span 4 这样跨度来编写相同内容。...唯一区别是它们是在本地范围内声明。 如何在 SAAS 中声明和使用变量?

    6.9K10

    前端-CSS Grid中陷阱和绊脚石

    DEMO1:https://codepen.io/airen/pen/mxOdYE 第二个示例使用CSS Grid实现相同布局,但是,你可以看到,最后一行中项目始终保持在它们中。...这是因为在网格中,我们将项目排列成行和 —— 二维布局。  ...重要是你想在布局里面的项目分配空间和相互关联。 网格轨道大小是否由内容来决定? 我们已经看到了如何在使用网格布局时,在容器上设置网格网格大小。但是,网格项可以指定网格轨道大小。...在很多情况下,隐式和显式网格渲染行为是相同,对于很多布局,你会发现你定义了,然后允许将行创建为隐式网格。不同是,当你开始使用负行号来引用网格最后一行时,你会发现还是有一区别的。...这可能会为那些已经在努力渲染现代网站浏览器造成一性能影响,带来不好用户体验。如果你南非要较旧浏览器与现代浏览器相同,那么你可能要考虑在这个项目中是否使用网格布局。

    4.8K20

    10分钟内就可以学会几个CSS高招

    当学习基本 CSS 时,你将更好地控制你代码创造力和自由度,直到我进入 Web 开发职业生涯,我才得到最好建议是学习 CSS 盒模型,因为当你理解它时,语言开始变得更有意义,事实上它很简单,我现在就教你盒子模型...在具有挑战性 CSS 方面,例如如何在水平和垂直方向上居中 div 古老问题。 ?...Grid 允许你考虑大图布局,当你将元素设置为显示网格时,它对开发人员更加友好,你可以将其子项定义为一堆和行。 ? 宽度可以用网格模板属性定义,我们在这里有三个值: ?...由空格分隔,这意味着我们有三注意 fr 值或小数单位将负责与网格其他共享可用空间,我们还可以定义一些行,现在网格每个元素都将自动定位,但重要是请注意,与 flexbox 布局或上帝禁止表格布局相比...而且,现在我们可以处理无限数量元素,而不会增加我们 CSS 占用空间,这要归功于 calc 和变量组合能力。

    1.4K20

    5分钟学习css网格

    网格布局是网站设计基础,CSS网格模块是创建网站最强大,最简单工具。...放置项目 接下来你需要学习是如何在网格上放置物品.这是你获得超级能力地方,因为它使得创建布局变得非常简单 让我们来创建一个3x3网格,使用与之前相同标记 .wrapper{ display...如果我们还有三个,那么最下面的一行也会被填充 要定位和调整项目的大小,我们将定位它们并使用网格网格属性 .item1{ grid-column-start:1;...两个属性设置宽和行高是多少,又通过grid-column-start与grid-column-end两个属性定位字元素位置和项目的大小,关于网格布局内容很多,自己知道也只是冰山一角,有待挖掘和探索...英文原文出处:https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228 作者:川川,一个靠前排90帅小伙,具有情怀代码男

    1.7K20

    【译】 刚出炉 Grid 布局备忘录,拿走!

    通过本文和大家一起重新认识 CSS Grid 布局 。 以下内容是2021年,你使用 Grid 布局可以做所有事情备忘单!...您既可以单独设置每宽度,也可以使用 repeat() 函数为所有设置统一宽度。 02 grid-template-rows 该属性用于定义行数和高度。...03 grid-template-areas 该属性用于指定网格单元格应在整个父容器中按和行进行承载空间量。这个属性可以让我们直观地看到自己在做什么。 我们称之为布局蓝图(模板)。...04 column-gap 此属性用于在网格之间放置间隙。 05 row-gap 此属性用于在网格行之间放置间隙。...03 grid-area 首先,我们需要设置 grid-template-areas☝️完成,我们必须在子类中指定父类中使用名称,如下所示: 在父容器内指定网格模板区域 在带有网格区域子类中指定在父容器中使用名称

    78520

    全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

    grid-column 属性 :用于指定网格项目``大小和位置,开始与结束线序号要使用/符号分开。 grid-column-start 属性 :指定网格项在网格``中起始位置。...# 多布局 multicol column-count: 创建指定数量 column-width: 创建具有弹性宽度(尽可能按照宽度创建,若容器与宽度成比例数量) column-fill:...长久以来,CSS 布局中唯一可靠且跨浏览器兼容创建工具只有 floats 和 positioning, 虽然这两个工具大部分情况下都很好使,但是在某些方面它们具有一局限性,让人难以完成任务。...属性: 定义网格数量及宽度大小,建议使用 fr 单位来设置灵活网格,此单位代表网格容器中可用空间一份(1fr 1fr 1fr = repeat(3, 1fr);=>表明了后续配置要重复多少次...grid-column 属性 :用于指定网格项目大小和位置,开始与结束线序号要使用/符号分开。 grid-column-start 属性 :指定网格项在网格起始位置。

    56320

    二维布局:Grid Layout

    CSS Grid Layout 是 CSS 中最强大布局系统。不像 flexbox 那样一维系统,它是一个二维系统,可以同时处理和行。...简介 CSS Grid Layout,旨在完全改变我们处理网格方式,它是二维表格系统。CSS 经常被用来布局,即使它表现得不是很出色。...网格区 四个网格线包围总空间。网格区域可以包括任意数量网格单元。这是行网格线1和3以及网格线1和3之间网格区域。...如果您所有网格项都使用非灵活单位( px)进行大小调整,则可能会发生这种情况。在这种情况下,您可以在网格容器中设置网格对齐方式。...值: line - 可以是指定网格线数字或者其他命名 span - 该项目将跨越提供网格轨道数量 span - 该项目将跨越,直到它使用提供名称命中下一行 auto -

    4.3K20

    CSS】最强大布局之grid布局精讲

    它将网页划分成一个个网格,可以任意组合不同网格,做出各种各样布局。 Grid 布局则是将容器划分成 “行” 和 “” 产生单元格,然后指定 “项目所在” 单元格,可以看作是二维布局。...基本概念         容器和项目         采用网格布局区域,称为 “容器”(container)。容器内部采用网格定位子元素,称为 “项目”(item)。...单元格         每行每都会分布单元格,在单元格内我们可以添加想要内容。         网格线 ​         格子边框为网格线,分为上下网格线和左右网格线。...grid-template-columns 设置数量 以及大小                         grid-template-rows  设置行数量以及大小 ...对于这个属性 我们还可以使用span关键字,他表示跨越网格数量,而不是线数量

    2.8K21

    每天10个前端小知识 【Day 17】

    Grid 布局即网格布局,是一个二维布局方式,由纵横相交两组网格线形成框架性布局结构,能够同时处理行与。...)中尽可能容纳更多单元格 grid-template-columns: repeat(auto-fill, 200px) 表示宽是 200 px,但数量是不固定,只要浏览器能够容纳得下,...顺序就是由grid-auto-flow决定,默认为行,代表"先行",即先填满第一行,再开始放入第二行。...比如网格只有3,但是某一个项目指定在第5行。...stretch:拉伸,占满单元格整个宽度(默认值) 应用场景 文章开头就讲到,Grid是一个强大布局,如一些常见 CSS 布局,居中,两布局,三布局等等是很容易实现,在以前文章中,也有使用

    14511

    5 个 CSS 新功能

    这就是CSS Subgrid 发挥作用地方。 可以向网格项目添加以下规则,以使其能够采用其父级网格轨道(包括名称网格线和区域,即使它也可以定义自己网格轨道和区域)。...: subgrid; } grid-column和grid-row属性定义了网格项目网格或行中位置。....grid-item子元素将形成子网格。 一个网格项目可以跨越多个网格单元。 例如,这里它分布在四个像元上(在上面的示例中grid-column和grid-row值是任意)。...通常可以通过在 flex 项目中添加 margin 来解决问题,但是margin问题在于,它们也会被添加到每个行或开头和结尾。...如果元素没有在常规块布局中指高度,则其高度为0。 这可能不是理想,因为滚动条大小会发生变化,这取决于每个具有非零高度内容。

    1.7K30

    最强大 CSS 布局 —— Grid 布局

    默认放置顺序是"先行",即先填满第一行,再开始放入第二行,即下图英文数字顺序 one,two,three...。这个顺序由 grid-auto-flow 属性决定,默认值是 row。...如果你在网格定义之外又放了一些东西,或者因为内容数量而需要更多网格轨道时候,网格将会在隐式网格中创建行和 假如有多余网格(也就是上面提到隐式网格),那么它行高和宽可以根据 grid-auto-columns...Grid 实战——实现响应式布局 经过上面的介绍,相信大家都可以看出,Grid 是非常强大。一些常见 CSS 布局,居中,两布局,三布局等等是很容易实现。...image repeat + auto-fit——固定宽,改变数量 等分布局并不只有 Grid 布局才有,像 flex 布局也能轻松实现,接下来看看更高级响应式 上面例子始终都是三,但是需求往往希望我们网格能够固定宽...,并根据容器宽度来改变数量

    4.2K20

    你现在可以玩下这 5 个 CSS 新功能

    这就是CSS Subgrid 发挥作用地方。 可以向网格项目添加以下规则,以使其能够采用其父级网格轨道(包括名称网格线和区域,即使它也可以定义自己网格轨道和区域)。...: subgrid; } grid-column和grid-row属性定义了网格项目网格或行中位置。....grid-item子元素将形成子网格。 一个网格项目可以跨越多个网格单元。 例如,这里它分布在四个像元上(在上面的示例中grid-column和grid-row值是任意)。...通常可以通过在 flex 项目中添加 margin 来解决问题,但是margin问题在于,它们也会被添加到每个行或开头和结尾。...如果元素没有在常规块布局中指高度,则其高度为0。 这可能不是理想,因为滚动条大小会发生变化,这取决于每个具有非零高度内容。

    47730

    How to make your HTML responsive by adding a single line of CSS

    -2a62de81e431 原文作者: Per Harald Borgen 翻译作者: hanxiansen 在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷图像网格图,它将根据屏幕宽度来改变数量...最精彩地方在于:所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋类名(col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询。...设置 在本文中,我将继续使用我在第一篇 CSS Grid 布局教程文章中网格布局。然后,我们将在文章末尾添加图片。下面是我们初始化网格外观: ?...高级响应 然而,上面列子并没有给出我们想要响应性,因为网格总是三宽。我们希望网格能根据容器宽度改变数量。...现在,栅格将会根据容器宽度调整其数量。它会尝试在容器中容纳尽可能多 100px 宽。但如果我们将所有硬写为 100px,我们将永远没法获得所需弹性,因为它们很难填充整个宽度。

    1.5K10

    大前端自动化工厂(2)—— SB Family

    ,开发中可以将与基础模块相关样式扩展写在这些文件中,这样做法可以在一程度上降低项目的维护难度。...当然你也可以直接引入normolize.css来对项目进行样式重置。 Neat——网格工具 ♒ 通过npm install -g bourbon-neat安装....我们使用第三方UI框架中,几乎都使用经典12布局,但总有些产品经理会提出希望将某一宽度扩展到1.5倍这种需求,或者有些场景下你希望对整个网页布局进行更精细控制,这个时候轻量级网格工具Neat...使用示例: 下面简单几行代码编译为CSS,就可以实现将页面分为间距为20px10,左侧边栏占2,右侧内容区占8;然后又将右侧内容区分为间距为10px6,每个表格项占1。...上图只是形象地描述了CSS技术进化方向,并不代表出现就一更好。

    59930

    Jump Start Bootstrap 第2章

    我们将学会网格系统如何工作;我们如何在应用中使用网格系统;我们也将创建简单网页布局去更好理解它。 什么是网格系统?...根据您设计需求,您可以创建无限数量行。这些行和交点形成了一个矩形网格来包含网站内容。 例如,在图中,我创建了一行,然后使用网格系统把它分成12。我已经改变了每一背景颜色来区分。...假设我们只想要一个单列,它应该跨所有12个可用Bootstrap;对此,我们将使用类col-xs-12,用数字12指定要跨越数量,(现在,你可以忽略类名中“xs”,我们将稍后讨论它)。...为了让我们显示清晰,让我们给题目都添加背景颜色。我们在这个项目CSS目录下,创建一个新CSS文件styless.css。这不是标准文件名,你也可以把它命名其他你希望名字。...在项目中创建一个新HTML文件nested.html;如同之前章节讨论一样,在这个HTML文件中关联Bootstrap设置,另外,关联我们早先设置styles.css

    2.9K40

    CSS 基础系列:从清除浮动和margin塌陷问题谈BFC

    BFC ,父元素将可以包含浮动子元素。...可视化格式模型规定了客户端(浏览器)如何在媒介(显示器)中渲染文档树(document tree)。...IFC 中是不可能有块级元素,当插入块级元素时( p 中插入 div)会产生两个匿名块与 div 分隔开,即产生两个 IFC,每个 IFC 对外表现为块级元素,与 div 垂直排列。...rows)和网格定义(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格(grid columns)为每一个网格项目(grid...设置为 flex 容器被渲染为一个块级元素,而设置为 inline-flex 容器则渲染为一个行内元素。 伸缩容器中每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量

    2.5K10
    领券