开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何创建一个响应式css网格(display: grid)，使其顶行有三个相等的方框，而其余行则是两个大小相等的方框？

要创建一个响应式的CSS网格，可以使用CSS的grid-template-areas属性和grid-template-columns属性来实现。以下是一个示例的代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-areas:
        "box1 box2 box3"
        "box4 box5 box6"
        "box7 box8 box9";
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .box {
      background-color: #ccc;
      padding: 20px;
      text-align: center;
    }

    .box1 { grid-area: box1; }
    .box2 { grid-area: box2; }
    .box3 { grid-area: box3; }
    .box4 { grid-area: box4; }
    .box5 { grid-area: box5; }
    .box6 { grid-area: box6; }
    .box7 { grid-area: box7; }
    .box8 { grid-area: box8; }
    .box9 { grid-area: box9; }

    @media (max-width: 600px) {
      .grid-container {
        grid-template-areas:
          "box1 box2"
          "box3 box4"
          "box5 box6"
          "box7 box8"
          "box9 box9";
        grid-template-columns: repeat(2, 1fr);
      }
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
    <div class="box box4">Box 4</div>
    <div class="box box5">Box 5</div>
    <div class="box box6">Box 6</div>
    <div class="box box7">Box 7</div>
    <div class="box box8">Box 8</div>
    <div class="box box9">Box 9</div>
  </div>
</body>
</html>

在上述代码中，我们使用了grid-template-areas属性来定义网格的布局，每个方框都被分配到一个特定的区域。然后，使用grid-template-columns属性来定义每列的大小，repeat(3, 1fr)表示每列都具有相同的大小。

在媒体查询中，我们通过@media规则来定义在小屏幕设备上的布局。在这种情况下，我们将网格改为两列，每列都具有相同的大小。

这样，无论是在大屏幕还是小屏幕设备上，都可以创建一个响应式的CSS网格，顶行有三个相等的方框，而其余行则是两个大小相等的方框。

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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

个人笔记）如何完成响应式布局，有几种方法？...看这个就够了详解 CSS3中最好用的布局方式——flex弹性布局（看完就会） [前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（...它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Grid 布局则是将容器划分成 “行” 和 “列” 产生单元格，然后指定 “项目所在” 的单元格，可以看作是二维布局。...column-gap 属性，设置列与列的距离。 gap 属性是上面两个属性的合并属性，第一个值是行，第二个是列。...对于这个属性我们还可以使用span关键字，他表示跨越的网格数量，而不是线的数量。

2.8K2 1

开发人员必备：9个令人惊叹的CSS网格生成器推荐！

它是一个非常有用的工具，可以利用其实用的CSS Grid功能创建动态布局。此外，它还可以让我们设置列和行的数量和单位。此CSS生成器非常容易通过在网格内拖动方框来创建分区。...每行和每列都有一个单位方框，因此我们可以以 px、fr 和 % 的方式更改行和列的大小。这有助于我们创建响应式布局和网格。...它允许我们添加任意数量的网格列和行，并且还可以设置它们之间的间距。你可以使用这个网格生成器轻松构建响应式布局，完成后还可以在Codepen中生成代码。...它是一个开源项目，可在GitHub上获得，帮助您创建响应式布局。此外，它具有非常简单的界面，使您可以通过将鼠标悬停在网格的角落上来更改每个等级的大小。此外，您可以拖放网格项以更改其位置。...总结以上是一些流行的CSS Grid生成器，你在将来可以考虑使用它们来塑造你的网站。毫无疑问，使用CSS Grid生成器，我们将能够创建响应式布局，并为我们的网站设计打下绝对的基础。

2.7K3 0

CSS布局新方案——Grid 网格布局

的值) ：你选择的任意名称 subgrid：如果你的网格容器本身就是一个网格项(即嵌套网格)，你可以使用此属性指定行和列的大小继承于父元素而不是自身指定（一般很少会用） .container...：调整网格的大小，使其宽度填充整个网格容器 space-around：和Flexbox里面的是一样的道理，设置网格左右两边的边距相等 space-between：和Flexbox里面的是一样的道理，两端对齐...当显示定位行与列（使用 grid-template-columns/grid-template-rows属性）时候，如果网格项目超出了网格的定义范围，那么就会创建隐式网格。...因为引用了不存在的网格线，所以会自动创建隐式轨道来填补空白。...>：将这两个属性的值设置指定值，其余的子属性值为初始值 [ [/]]：这三个属性分别接受相同的值，如果省略了

2.5K1 0

（译）一篇对css网格布局的介绍

综合运用它们，可以帮助我们在css中实现在之前无法想象的布局基础知识 1、定义表格容器 Grid 布局的开始都是开始于创建一个布局容器，可以通过在父元素声明display:grid;。...一个网格轨道是相邻网格线之间的空间，实质就是行或者列。在上图中，每一个列之间的每个空间就是轨道。...那如何定义宽度可变的表格呢？使用像素单位是没法做自适用的布局的其实我们有fr这个单位，fr代表网格容器中可用空间的一小部分。所以我们切换px到fr。....parent { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } 这里代表三个意思几列宽度是相等的...仅用3行css实现响应式布局我们可以使用auto-fit代替auto-fill解决上面提到的问题。auto-fit使用尽可能多的元素代替轨道，这就代表着会充满所有的空间。

3.4K3 0

最强大的 CSS 布局 —— Grid 布局

上图中 One、Two、Three 组成了一行，One、Four 则是一列 ? 行和列网格单元：一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。...Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。...如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns...我们接下来看看 Grid 布局是如何实现响应式布局的 fr 实现等分响应式 fr 实现等分响应式[14] fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。...image 参考常见的 Grid 布局用例[19] CSS Grid 网格布局教程[20] Grid 布局草案[21] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局[22]

2.3K2 0

CSS Grid 那些鲜为人知的内幕

容器高度固定当我们将容器的高度固定后，在这种情况下，其内部项目的高度会「均分」容器高度。也就是当拥有多个项目时它们被分成大小相同的行。 4. 创建网格单元默认情况下，Grid将创建单列布局。...在这种情况下，额外的空间已经减少了16px，以用于设置gap。隐式和显式行隐式行如果我们向一个两列网格添加「超过两个子元素」会发生什么呢？从结果来看，gird将第三个元素放置到了第二行。...显式行不过，在其他情况下，我们希望「显式定义行，以创建特定的布局」。...：在每个网格项之间放置相等量的空间，两端的空间为一半大小 space-between：在每个网格项之间放置相等量的空间，两端没有空间 space-evenly：在每个网格项之间放置相等量的空间，包括两端...在这种情况下，我们有一个隐式网格只有一个子元素，因此我们得到一个 1×1 网格。place-content: center 将行和列都推向中心。

1121 0

CSS进阶12-网格布局 Grid Layout

一个网格项目引用网格线来确定其网格中的位置属性。下面两个例子创建了三个列网格线和四行网格线。第一个示例演示了设计师如何将一个使用网格行号的位置来确定网格项目的位置，第二个例子显式的设置了网格线。...每个网格轨道可以设置一个大小，用来控制宽度或高度或者行可能会增长。网格单元是网格行和网格列的交集。它是定位网格项时可以引用的网格的最小单元。在接下来的例中定义了一个三行两列的网格。...他有四条网格线，网格区域每边一条，四边相交组织的网格轨道可以调整网格区域大小。可以使用“grid-template”属性为网格容器显式的设置网格区域，或者隐式的使用网格线创建网格区域。...4.4 网格容器 Grid Containers 通过“display”属性给一个元素显式的设置了“grid”或者“inline-grid”属性值，这个元素将自动变成网格容器一个网格容器将会创建一个新的网格格式化上下文内容...一个网格项目创建一个新的格式化上下文内容。这种格式化上下文内容类型取决于它的“display”值。

5.9K2 0

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

但是对于前者，由于CSS的庞大，一个CSS文件中或许有上千条规则，而且对于当前节点来说，大多数规则是匹配不上的，稍微想一下就知道，如果从右开始匹配（也是从更精确的位置开始），能更快排除不合适的大部分节点...Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。...来创建一个网格容器 display：grid 则该容器是一个块级元素 display: inline-grid 则容器元素为行内元素 grid-template-columns 属性，grid-template-rows...stretch - 项目大小没有指定时，拉伸占据整个网格容器 grid-auto-columns 属性和 grid-auto-rows 属性有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格...超出的部分就是隐式网格而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高关于项目属性，有如下： grid-column-start 属性、grid-column-end

1161 1

【CSS】1287- 一行 CSS 实现 10 种强大的布局

.parent { display: grid; place-items: center; } 这使得内容能够在父级内完美居中，而不管内部大小。 02....向组件添加 display: grid 将为您提供一个单列网格，但是主区域的高度将仅与页脚下方的内容一样高。...，并将剩余空间 ( 1fr ) 应用于主区域，而auto调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。...06. 12 跨网格：grid-template-columns: repeat(12, 1fr) 图片接下来我们有另一个经典布局：12 跨网格。...RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(, 1fr)) 对于这第七个示例，结合您已经了解的一些概念来创建具有自动放置且灵活的子项的响应式布局

4.6K2 0

使用 CSS Grid 的响应式网页设计：消除媒体查询过载

在这篇文章中，我们将踏上一场激动人心的 CSS Grid 之旅，发现它如何消除了对复杂媒体查询的需求，使你能够轻松创建响应式网站。所以，让我们深入研究，彻底改变你对网页设计的方式吧！...属性创建了三个等大小的列，每列占据一个分数单位（1fr）。...如果我们坚持使用前面的示例，当在较小的屏幕上查看时，网格会将屏幕分成三个等分，导致内容变小，可能变得难以阅读或与之交互。但是，CSS Grid 提供了强大的功能来实现响应式设计。...让我们分解使用的不同CSS属性：display: grid;：此属性将容器元素定义为网格容器，建立一个新的网格格式上下文。这允许你创建具有行和列的网格布局。...通过利用这些 CSS Grid 函数，你可以创建动态和适应性布局，以对不同的屏幕尺寸提供漂亮的响应，提供最佳的用户体验。结论有了 CSS Grid，我们不再需要应对多个媒体查询来实现响应式了。

2001 0

CSS Flexbox与Grid：构建响应式布局的艺术

.container { display: grid; } grid-template-columns 和 grid-template-rows 定义网格的列和行轨道（track）大小。...(100px, auto); /* 新添加的行最小高度为100px，最大高度自适应内容 */ } grid-auto-flow 控制网格项目如何自动填充和排列。...Grid和Flexbox的优点，创建更复杂的响应式布局。...} .container > div { height: 100%; /* 保持子元素高度 */ } } 首先使用CSS Grid创建了一个自适应列宽的网格布局。...CSS Grid 更适合处理二维布局，如表格或复杂网格布局，以及精确的单元格控制。

671 0

css grid 布局那些事儿

CSS 网格简介随着布局系统的不断发展，CSS 也取得了长足的进步。随着 CSS Grid 的发布，我们终于有了一个强大的工具来创建二维布局。...在这种情况下，CSS Grid 可以派上用场！ CSS 网格架构有两种使用 CSS 网格布局的方法：隐式和显式。使用隐式网格，您只需定义所需的列数，浏览器将自动创建网格。...容器元素定义网格，子元素放置在网格单元格中。它是一个响应式布局系统。这意味着它可以适应不同的屏幕尺寸和分辨率。CSS Grid 也很灵活，这意味着它可以用于从简单到复杂的各种布局。...提供控制项目放置在网格区域内后如何对齐以及网格整体对齐方式的能力。提供使用像素创建使用固定轨道大小的网格的能力 - 将网格设置为适合您所需布局的指定像素。...您还可以使用百分比或 fr 单位来指定灵活的轨道大小。所有这些功能在正确使用时都可以创建在任何屏幕尺寸上都能很好显示的响应式布局。

2K3 0

分享一些关于 CSS Grid 基础入门知识

网格系统（CSS Grid）是CSS中最重要的特性之一。它能够以简单的方式将元素对齐到列和行中。CSS网格使得设计复杂且响应式的网页变得更加容易，无需使用浮动、表格或定位。...你的任务是使其具有响应式布局，因此你决定在桌面上每列显示三个产品，在平板上每列显示两个产品，而在手机上每列只显示一个产品。...它与grid-template-columns类似，唯一的区别是现在我们是在处理行而不是列。假设我们想要定义一个具有两列和两行的网格容器。...它们之间没有区别，只是我们是在处理行而不是列。网格间隔属性（grid-gap）网格间隔属性grid-gap用于在父元素内设置列和行之间的间隔。...结论网格是一个令人惊叹的CSS特性，它使你能够轻松设计复杂且响应式的布局结构。我强烈建议你多加练习这个特性，因为只有通过实践才能更好地掌握它。

1633 0

grid 布局的使用

grid 布局的使用　　　css 网格布局，是一种二维布局系统。　　　浏览器支持情况:老旧浏览器不支持，　　　概念：网格容器。...组成网格线的分界线，他们可以是列网格线，也可以是行网格线　　　　网格轨道。两个相邻的网格线之间为网格轨道，可以认为是网格的行列或者行。　　　　网格单元。...两个相邻的列网格线和两个相邻的网格线组成的网格单元，它是最小的网格单元。　　　　网格区。网格区是由任意数量网格单元组成。　　...当设置行或者列大小为auto 时，网格会自动分配空间和网格名称。　　　　　　　　...: ... ; 　　　　　　自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器　　　　　　范围时，将自动创建隐式网格轨道.

1.5K7 0

一次性把所有普通和经典的网页布局讲得通通透透的，多图预警，建议收藏

embed/zYrRYxW) 在CSS Grid布局模块中，只要显式设置了display: grid（或inline-grid）就会创建Grid容器和Grid项目，也会自动生成网格线，即行和列（默认为一行一列...但两者的差异是非常地大，用下图来描述auto-fit和auto-fill的差异：另外这种方式也是到目前为止一种不需要借助CSS媒体查询就可以实现响应式布局效果。...这是因为我们示例中通过grid-template-areas来声明网格，在使用grid-template-areas创建网格时，其实也隐式的创建了网格线，只不过他和grid-template不同的是grid-template...可以显式的指定网格轨道大小，而grid-template-areas在该示例中相当于网格轨道大小都是1fr。...比如上面的HTML结构，行中有三列，每列的宽度刚好四个网格宽度加两个列间距。

5.6K1 0

万字总结 CSS 布局

display: flow-root做的唯一的一件事就是去创建一个BFC，因此可以避免其他创建BFC方法带来的问题。...建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。...网格布局 5.1 Grid 布局是什么网格是一组相交的水平线和垂直线，它定义了网格的列和行。CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。...正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。...它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

5.6K2 0

【CSS】253- 从原型图到成品：步步深入 CSS 布局

第二步：沿着各个单元画方框画一些方框把这些元素框起来，看看行和列是否初具规模。我们把方向一致的单元归到同一个方框中。 ? 在页面中的 HTML 元素基本上都可视为矩形。...这三个 span 和文字 “insightful message” 处于不同行，因为（a）它们被包在一个 div 中，div 后面自然要另起一行；（b）p 标签同样是块级元素，它自然从新行开始排列。...第三步：再画一些方框我们想把头像图片放在左侧，其余元素放在右侧。你可能会根据刚刚探讨的行内和块级知识来推断，认为只要把右侧的元素都包裹到一个如 span 标签般的行内元素中，就完事大吉了。...在本例中，我们会设置一些嵌套的 Flex 容器，让该成行的成行，该成列的成列。我们把外层容器（绿色方框）设置为列，蓝色方框设置为行，而红色方框中的元素排布在列中。 ?...没错没错，在 Web 开发的世界，普遍的更替法则是后浪推前浪，但 CSS 并不如此。Flexbox 和 Grid 能够和谐共存。用 CSS 解决问题，条条大路通罗马！

4.4K5 1

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

HTML 结构不再受限于样式表现，比如不要为了实现某种布局而多次嵌套，现在这些都可以让 CSS 来完成。定义一个网格 Grid(网格) 模块为 display 属性提供了一个新的值：grid。...在 grid-template 属性中指定每一个值可能会很乏味。幸运的是，有一个 repeat 函数，就像任何一个循环重复多少次输出某个给定值。它有两个参数。第一个是迭代次数，第二个是要重复的值。...这意味着在我们之前的例子中，有四条垂直线和四条水平线包含它们之间的行和列。 ? 在将网格项从一个位置跨越到另一个位置时，网格线变得非常有用。网格轨道是两条线之间的空间。网格轨道可以是一行或一列。...让我们创建一个简单的 bread-and-butter 布局，顶部有一个 top, nav，中间有 main 和 aside，下面是 footer。...我们还学习了如何使用网格线和网格命名区域在网格容器内定位网格项目。但这只是一个开始。在下一个教程中，我们将深入到CSS网格。

1.9K1 0

回炉重造，css常规布局系统整理——实战开发后复盘小结

块级元素：display:bloak；占据一行，下一个元素自动换行，如div等；行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等；行内块：...浮动的元素，脱离文档流（比如正常我们放一个div在页面里，是有一个文档流的，就是会有位置的，而变为float定位后，就会漂浮起来，原来的位置就不占用了，再放其他div，会从忽略float的位置，正常排列...# 2.1 flex布局# 一种响应式布局，何为响应式？...可以随着浏览器窗口大小放大缩小，而布局元素也相应放大缩小。具体分析见下面第三节的讲解。...，它有行和列，flex只有行，其常用于固定元素个数布局；可参考阮一峰的网络日志 - CSS Grid 网格布局教程：http://www.ruanyifeng.com/blog/2019/03/

2.2K2 0

「译」前端项目中常见的 CSS 问题

CSS 网格布局中关于 auto-fit 和 auto-fill 差异的误解在 CSS 网格布局中，repeat 函数可以在不使用媒体查询的情况下创建响应式列布局。...将会在不扩展列宽度的情况下对它们进行排列，而auto-fit 则会在存在空列的时候使其宽度塌陷为 0。...使用 CSS 网格定义 main 和 aside 元素 CSS 网格可用于定义布局中的 main 部分和 aside 部分，这是 CSS 网格的绝佳用途。...使用 display: inline-block 时奇怪的空隙给两个或两个以上的元素设置 display: inline-block 或者 display: inline ，将会导致它们之间产生一个微小的空隙...下面的例子中，每个项目的右侧都有一个 8px 的空隙，但是使用 display: inline-block 而产生的小空隙将会使其变为 12px，这不是我们想要的效果。

2.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭