标签: css-grid

我知道有类似的问题,但这是特别询问如何使用CSS网格布局.

所以我们有这个基本的网格设置:

HTML(带侧边栏):

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

  <div class="sidebar">
    <p>sidebar</p>
  </div>

</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr 200px;
}

要创建看起来像这样的布局:

| content               | sidebar |

如果页面没有侧边栏,即.html看起来像这样,但使用相同的CSS:

HTML(没有侧边栏):

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

</div>

页面布局如下所示(破折号表示空白区域)

| content               | ------- |

我知道为什么会这样做,网格列仍然在grid-template-columns规则中定义.

我只是想知道如何告诉网格如果没有内容,那么填写剩余空间类似于flex-grow工作方式flexbox.

如果没有侧边栏,则期望的结果将如此.

| content                         |

是否有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演示

我试图让一个子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网格创建一个简单的(我认为)布局,但我找不到如何做到这一点.

基本上,我希望并排显示图像和文字.当包含网格的宽度太小时,文本将低于图像并且两者都采用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 Tricks 上的CSS 网格教程，但一个基本方面让我有点困惑。

似乎有两种方法可以确定网格项跨越多少个单元格：

1. grid-template-areagrid-area使用为具有属性的网格项指定的名称
2. 使用grid-column-start/end和grid-row-start/end

看看下面的测试代码，似乎 的大小grid items是按以下顺序决定的（其中左侧的值覆盖右侧的值）：

grid-row/column-start/end>>grid-template-area物品本身的尺寸

问题

1. 我的上述顺序通常是正确的吗？
2. 是否有指定大小grid items（即它们跨越多少个单元格）的首选方法（上面的 1 或 2）？

代码

.container {
  display: grid;
  border: 1px solid green;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 120px 120px 120px;
  grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}

.item-1 {
  border: 1px solid blue !important;
  grid-area: item-1;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}

.item-2 { …

我有这样的事情：

.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值是可行的，但是有一种方法可以在不事先知道子代数的情况下进行吗？

谢谢。

我有下面的代码示例。如何确保对于任何给定的行数或列数，网格将根据需要扩展项目以填充其父容器？

目的是拥有一种计算器应用程序，其中网格项目作为按钮，应占用尽可能多的空间但均匀。

以下是我带来的。正如您所看到的，有滚动，而且我不确定这是正确的方法。

body {
  min-height: 100%;
}

.wrapper {
  display: grid;
  position: relative;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1px;
  justify-content: center;
  height: 100%;
}

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

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

<section class="container">
  <div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box a">A</div>
    <div class="box …

我正在尝试创建一个看起来像这样的网格，

第一行有两列，第二行有三列。它们的宽度应该相等，但我的绘画技巧不是最好的。

我试图通过在“Kort”细胞上使用类似的东西来靶向特定细胞来实现这一目标，

  grid-row: 1; 
  grid-column: 2/4;

但我似乎无法做到这一点。任何帮助是极大的赞赏。

我目前在网格项之间添加垂直线时遇到一些麻烦。我当前的解决方案在线条之间有空白空间，并且无法使用边框，因为边框将直接“粘合”在项目上，而不是在两个项目的中间。

上面的代码目前看起来像这样：

但它应该看起来像这样：

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}

.grid-item::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  background: grey;
  right: -9px
}

<div id="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>