标签: css-grid

我正在尝试将我的Flexbox布局更改为新的display: grid,我有三列.

<div class="grid">
    <div class="three wide column"></div>
    <div class="two   wide column"></div>
    <div class="two   wide column"></div>
</div>

它看起来像这样:

是否可以指定一些列从右侧开始而不是从左侧开始,如下图所示？

(并且没有指定grid-column-start和grid-column-end,这可以通过margin-left: autoFlexbox完成)

<div class="grid">
    <div class="three wide column"></div>
    <div class="right floated two wide column"></div>
    <div class="right floated two wide column"></div>
</div>

什么时候

grid-template-areas:
       "....... header  header"
       "sidebar content content";

改为:

grid-template-areas:
       "....... header  header"
       "sidebar header content";

一切都崩溃了.

如何使用CSS Grid布局实现相同的效果？

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-template-areas: "....... header  header"
                       "sidebar content content";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

<div …

我有一个项目列表,按日期排序.

有些项目是未来的(绿色项目),因此更有趣,有些是过去(棕色项目).我希望第二组项目在新行中开始.

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown;
}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

每个类别的整体项目/项目数量不断变化,每行的项目数量取决于屏幕大小 - 这可能会消除一些可能的解决方案.

我当然可以在某个点拆分包含所有项目的数组,并将输出组织成两个单独的网格,如下所示:

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
  margin-bottom:10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown; …

使用repeat()和auto-fit/ auto-fill函数,当列或行具有已定义的长度模式时,很容易获取网格项.

在下面的示例中,所有列的最小宽度为100px,最大宽度为1fr.

jsFiddle演示

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

但是当轨道没有长度模式(即长度随机变化)时,网格物品如何包裹？

在下面的示例中,第一列的宽度为60%.第二列是最小/最大250px/1fr.如何让第二列包装在较小的屏幕上？

jsFiddle演示

#grid {
  display: grid;
  grid-template-columns: 60% minmax(250px, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

<div id="grid">
  <div></div>
  <div></div>
</div>

我知道flexbox和媒体查询提供了解决方案,但我想知道Grid Layout是否可以做到这一点.我搜索了规格,但没有找到任何东西.也许我错过了这个部分.谢谢你的帮助.

关于CSS网格的所有指南似乎都暗示了一种结构,其中位于网格中的元素是网格本身的子元素.

<div class="wrapper">
  <div>A</div>
  <div>B</div>
</div>

凡.wrapper具有display: grid和网格属性的定义.

如果我想在网格本身上放置一个网格的"孙子"元素(而不是依赖于它的父级？),这是否有意义？

<div class="wrapper">
  <div>A</div>
  <div>
    <div>B</div>
    <div>C</div>
  </div>
</div>

在这里,我希望能够将A,B和C各自放在他们自己的网格行上; 这甚至有意义吗？

几年后回到webdev,学习这个CSS网格业务,但也消除了被遗忘的知识; 如果存在,请承担愚蠢.

这是一个目标的模型:

我正在构建一个简单的CMS界面,应该向右扩展以填充浏览器屏幕; 除了第 1列之外,我当前的代码导致外部网格的第2列与浏览器一样宽; 或者也许其中一个孩子正在造成这种情况,它只是在扩大以适应.无论哪种方式,它都会横向溢出页面

所以代码:

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 100%;
  grid-template-rows: 100px 100%;
}

#col-2-outer {
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100%;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
}

<div id="main">
  <div id="col-1-outer"></div>
  <div id="col-2-outer">
    <div id="row-1-inner"></div>
    <div id="row-2-inner">
      <div id="col-1-inner"></div>
      <div id="col-2-inner">
        <table></table>
      </div>
    </div>
  </div>
</div>

仅供参考,目前我已经放弃了模板区域,直到我掌握了基础知识(除非这样解决了我的问题,但我认为这是严格的代码组织功能？).

我正在尝试使用CSS网格创建一个表,基于内容使用相等的列.我想避免使用<table>.这是此问题的后续问题:使用CSS网格自动调整列

我想要实现的目标:

此表有效:https://codepen.io/anon/pen/baExYw

但是我想把每一行包裹起来div,这不足为奇地打破了桌子.

该表格已破:https://codepen.io/anon/pen/qpbMgG

app.html

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

app.css

.wrapper …

使用 CSSdisplay: grid而不是 html 标签是个好习惯<table>吗？

很多时候<table>在响应式设计中很难使用。特别是对于复杂的购物篮表和处理 colspan 等。但是使用 css-grid 很容易。

我在样式行（如<tr>表格）中看到了一些问题。有 nth-child 东西的方法。你怎么看待这件事？

我正在构建一个 CSS 网格布局，不知何故我无法获得“自动”值来调整行高的大小。

项目保持最小高度为 1fr，即使它们的内容小到足以让它们缩小。

这是一个解释问题的代码示例 - 您也可以在https://codepen.io/16kbit/pen/RJbMWM上查看

section {
  display: grid;
  grid-template-areas: "one top" "one bottom";
  align-items: start;
  border: 1px solid hotpink;
}

article {
  border: 1px solid green;
}

#one {
  grid-area: one;
}

#top {
  grid-area: top;
}

#bottom {
  grid-area: bottom;
  background: yellow;
}

<section>
  <article id=one>
    <h1>One</h1>
    <p>Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque …

我正在尝试使用 CSS Grid 规范创建一个 3 列布局，但我遇到了行和元素大小的问题。我的列需要包含不同高度的未指定数量的内容。

这是我理想的布局：

问题：

1）如果我告诉元素 A 和 B 使用第 1 行、第 1 列，那么它们会相互叠加，而不是 B 在 A 下方。

2)如果我指定元素 B 使用第二行，那么由于元素 C 使第 1 行变高，它会被推到元素 C 下方。

3)如果我指定元素 B 使用第二行，则元素 A 会拉伸以填充第 1 行。

有没有办法让元素表现得像第一张图片？

我所知道的唯一解决方案是在列内创建“脚手架”div，如下所示：

<div class="grid">
    <div class="col">
        <div class="itemA"></div>
        <div class="itemB"></div>
    </div>
    <div class="col">
        <div class="itemC"></div>
    </div>
    <div class="col">
        <div class="itemD"></div>
        <div class="itemE"></div>
        <div class="itemF"></div>
    </div>
</div>

但我不喜欢这样做，我认为网格规范应该允许在没有脚手架的情况下创建布局。

问题：

1）有什么办法可以防止元素拉伸以垂直填充行？

2)是否可以将两个元素放在同一行上，并让它们一个在另一个下面而不是冲突？

这是我的 2 支笔，我试图在其中找到有脚手架和没有脚手架的解决方案：

无脚手架

带脚手架