我正在玩CSS网格.

当我在桌面大小上查看它时,(min-width: 769px)我有一行有3列 - 如下所示:

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

我可以使用css-grid移动列,这样我就可以在移动布局上执行以下操作:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

我知道我用这样的东西跨越细胞:

.content{
  grid-column: 1 / span2;
}

但我想改变列的顺序.没有预处理器,我可以这样做吗？

这是我当前的网格类:

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}

是否有css网格属性来添加网格列之间的规则(垂直线),以及网格行之间的规则(水平线),以相同的方式或类似方式,列规则有效吗？

我在规范中看不到它,但也许我错过了一些东西,或者有些东西正在开发中？

使用grid-template-columns: repeat(auto-fit, minmax(600px, 1fr))可以轻松构建响应式CSS网格.容器将填充尽可能多的元素,而不使用媒体查询.

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.item {
  height: 100px;
  background: #ccc;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

问题是当屏幕小于指定的最小值时,项目比屏幕宽minmax().您可以通过添加媒体查询来解决此问题400px,但这仅在您知道容器周围没有内容时才有效.当容器可以放在任何地方时,这几乎是不可能的.

有没有办法或财产告诉这些项目他们永远不应该超过100%？

类似的东西:用尽可能多的400px物品填充容器,但要确保它们的宽度不超过容器宽度的100%.

CodePen演示

我正在使用一个非常简单的布局的页面 - 基本上是一个数据表,但使用网格布局,以便列将根据内容大小很好地调整.我想使行可排序(使用jQuery),所以我需要找到一种方法来包装容器中同一行的所有单元格.

display: subgrid;

我尝试过使用subgrid,但目前似乎没有太多支持..显然,只是嵌套网格不起作用,因为它不会同步不同网格之间的列大小.

有关如何实现这一点的任何想法？

到目前为止,这是我的笔:https://codepen.io/anon/pen/PEjqgx

我试图让一个子CSS网格尊重父网格的尺寸.我怎么能这样做？

我最初写的是这样的:https: //codepen.io/anon/pen/XVExrj

CSS:

.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: #0D47A1;
  grid-area: nav;
}

.child {
  grid-area: child;
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}

HTML

<div class="parent-grid"> …

我正在摆弄基于CSS网格的前端,并且在前端的不同部分需要一遍又一遍地执行以下行为:

1. 具有可变行数的网格.
2. 每一行都应该有一个可变的大小(auto会这样做).
3. 最后一行应始终占用所有剩余空间.

因此,在我碰巧需要五行的情况下,这就是诀窍:

.myGridForFiveRows
{
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
}

但是,我真的很喜欢一个样式表,它可以为任何给定行数产生正确的行为.我想也许我可以用某种方式repeat()做到这一点？

https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

.myGrid
{
    display: grid;
    grid-template-rows: repeat(auto-fit, auto) 1fr;
}

我一直在玩弄的变种repeat(auto-fit, auto)和repeat(auto-fill, auto),不幸的是不合法的CSS,而repeat(4, auto)或repeat(auto-fill, 30px)有.

任何的想法？这不是我无法规避的事情,但恰好"显示n个正确大小的行,然后让最后一个元素占用所有剩余空间"基本上是我的规范中所有元素的默认行为...

在下面的示例中,我希望将所有项目都设置为最大内容的宽度(例如,项目5).

• 列表中的项目数是动态的,可能有数百个.

• 每个项目内容的宽度也是动态的.

• 每行中的项目数量将根据容器的宽度而变化.

期望的输出

注意: 媒体查询不适用于我的方案.

使用CSS FLEX

Flex被认为是一维的.这意味着它可以在单个轴(行)上实现所需的结果,除非内容小于可用空间.

非包装示例(单行)

.container {
  display: flex;
}

.item {
  background: #58c;
  text-align: center;
  white-space: nowrap;
  margin: 0 10px 10px 0;
  flex: 1;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5 is longer</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Flex的flex-wrap属性可用于创建二维布局.再次这很好用,但需要一个固定的宽度值才能计算每个项目的宽度.

包装示例(多行)

.container {
  display: flex;
  flex-wrap:wrap;
}

.item {
  background: #58c; …

我正在尝试使用css网格创建一个简单的(我认为)布局,但我找不到如何做到这一点.

基本上,我希望并排显示图像和文字.当包含网格的宽度太小时,文本将低于图像并且两者都采用100%宽度.

这很容易做到grid-template-columns: repeat(autofit, minmax(300px, 1fr)):https://codepen.io/anon/pen/vajYZM

问题是,当图像和文本并排时,我希望文本是两倍大.我可以这样做,grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr)但然后文本永远不会低于图像,我有溢出.

我想我能做到这一点,如果我使用grid-template-columns: repeat(autofit, minmax(200px, 1fr))和grid-column: span 2文本元素上,但后来我不得不采用同样的跨度2图像上一次文本低于.

可以在CSS中定位网格行的最后一个元素吗？

我知道我可以使用媒体查询来改变grid-template-columns,但我宁可使用纯CSS.基本上,是否可以在网格中明确定义列,如果没有适合的位置,列会消失？

或者我可能以另一种方式错过了吗？

我使用CSS Grid布局了困难的网格布局，其中网格项目的高度和宽度都不同。网格行1fr的高度设置为与网格高度成比例。某些网格项目具有grid-row: span 2或grid-row: span 3。

网格元素绝对位于包装纸的内部，并带有填充物，以保持长宽比。

在-ms-前缀的帮助下，这一切在Chrome和Firefox甚至IE中都可以完美运行。

在Safari中，情况有所不同：

但是，在Safari中，网格行的计算方式似乎并不相同-Safari浏览器中的行高比任何其他浏览器都长很多，短得多，这破坏了布局。为什么是这样？

从栅格元素删除绝对位置不会更改行高。但是，似乎放在height: 0网格包装上的行为会使行高在Safari中的行为与在Chrome和Firefox中的行为相同。这是什么原因呢？

码：

Codepen：https：//codepen.io/katrina-isabelle/pen/rRqvXq

.grid-wrapper {
  position: relative;
  padding-bottom: 60%;
}

.grid {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 29% 21% 21% 29%;
  grid-auto-rows: 1fr;
  position: absolute;
  width: 100%;
  height: 100%;
}

.grid-item {
  width: 100%;
  color: #ccc;
  background: #ccc;
}
.grid-item--1 {
  grid-row: span 2;
}
.grid-item--2 {
  grid-row: span 3;
}
.grid-item--3 {
  grid-row: span 2;
}
.grid-item--4 { …

我有这样的事情：

.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</div>
  <div class='otherstuff'>
    <div class='grid'>
      <div class='cell'>Cell 1</div>
      <div class='cell'>Cell 2</div>
    </div>
  </div>
</div>

我希望网格仅占用所需的最小空间，而不要扩展。我已经阅读了该线程，并看到使用grid-template-columns和auto值是可行的，但是有一种方法可以在不事先知道子代数的情况下进行吗？

谢谢。