那些遇到过的问题

标签: css-grid

视频会议像使用css网格的视频网格

我正在尝试创建一个像网格一样的视频会议。我正在尝试使用 css-grid 但不知何故我无法完成我正在寻找的东西。这个想法很简单，在屏幕上有一个视频网格，并将视频分页到不适合第一页的下一页。

我尝试使用以下方法： 

<div className="videoContainer">
    <div className="videoWrapper">Cam 1</div>
    <div className="videoWrapper">Cam 2</div>
    <div className="videoWrapper">Cam 3</div>  
</div>
Run Code Online (Sandbox Code Playgroud)

CSS 

.videoContainer {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    border: 2px solid blue;
}
.videoWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    border: 1px solid green;
}
Run Code Online (Sandbox Code Playgroud)

我正在寻找的是一些指向我想去的方向的指针/提示/任何文章（没有找到任何有用的东西）。

我有一个简单的布局解释如下（大屏设备左栏，移动设备右栏）：

在此处输入图片说明

html css reactjs css-grid

Aya*_*yan
lucky-day
5
推荐指数
1
解决办法
2404
查看次数

如何在最大宽度容器内制作网格项目以跨越整个宽度？

CSS 网格位于具有以下内容的页面上max-width：

在此处输入图片说明

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 400px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / -1;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 1 / -1;
  background-color: tomato;
}

@media (min-width: 576px) {
  .max-width {
    max-width: 500px;
  }
  .first-grid-item {
    grid-column: 1 / 9;
  }
  .second-grid-item {
    grid-column: 9 / 13;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在较小的屏幕上，布局会发生变化，第二个网格项位于第一个下方： …

css css-grid

Mis*_*hko
2020 05-16
5
推荐指数
1
解决办法
438
查看次数

防止CSS网格导致溢出

我有一个 CSS 网格，但我发现网格行并不都适合页面 - 相反，它们会导致溢出。如何调整网格行的大小，以免它们溢出页面？我认为该1fr值应该这样做，但它似乎在我的代码中不起作用。

我已经查看了防止内容扩展网格项目并尝试了那里的建议答案（例如更改grid-template-rows: repeat(5, 1fr)为grid-template-rows: repeat(5, minmax(0, 1fr));但无济于事。

我试过添加height: 100%到网格中，它是容器，但它仍然溢出。

JsFiddle https://jsfiddle.net/4g9b2qkL/

body,
html {
  margin: 0;
  height: 100%;
}

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#left {
  grid-column: 1 / 2;
  background: lightblue;
  height: 100%;
}

#right {
  grid-column: 2 / 3;
  height: 100%;
}

#results {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 100%;
}

img {
  max-height: 100%;
  max-width: 100%;
} …
Run Code Online (Sandbox Code Playgroud)

html css css-grid

The*_*see
2020 06-12
5
推荐指数
1
解决办法
301
查看次数

CSS网格体育场形状

我一直在尝试在 CSS Grid 上使用下图，但结果非常具有挑战性

在此处输入图片说明

该图像代表一个体育场，但很难使它看起来像所附的图像。几点考虑

  • 角是三角形，所以最难的部分是使它们具有那种形状并且响应迅速。

  • 我可以使用 CSS Mask 来处理形状和间距，但这会切断几个圆圈。

我做了我的尝试，错误和错误，并成功了一半。知道如何使它工作吗？或者如果有人有不同的方法也会帮助我

https://jsfiddle.net/rodboc/9psa4bg3/1/

有什么想法吗？

.grid {
  max-width: 80vw;
  min-height: 90vh;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 30% [main-start] 40% [main-end] 30%;
  grid-template-rows: 20% [main-start] 30% [main-end] 20%;
  margin: 0 auto;
}

[class^="item"] {
  background-color: blue;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
}

.item1 {
  background-color: red;
  grid-area: main;
}
.circle {
  width: 5px;
  height: 5px;
  overflow: hidden;
  background: #ccc;
  border-radius: 50%;
  margin: 1px;
  padding: 0;
} …
Run Code Online (Sandbox Code Playgroud)

html css raster shapes css-grid

rod*_*boc
2020 06-26
5
推荐指数
1
解决办法
441
查看次数

如何使用CSS网格跳过一列？

网格系统设计

我需要将中间的网格项保持为空。我认为使用以下属性是可能的：grid-template-areas

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";
Run Code Online (Sandbox Code Playgroud)

但不幸的是，这并没有给出正确的显示。

所以我使用了 5 个名为 item-a 到 item-e 的类，然后在 css 中设置了网格中的正确位置。然而，这感觉不是一种非常有效的方法。有谁知道如何使它更有效？

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";
Run Code Online (Sandbox Code Playgroud) 
.content-container {
    width: 51.5em;
    height: 30em;
    padding: 2.125em 1.5em;
    display: grid;
    grid-template-columns: 45% auto 45%;
    grid-template-rows: auto;
  }

  .item-a {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .item-b {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .item-c {
    grid-column: 1;
    grid-row: 2 / 3;
  }

  .item-d {
    grid-column: …
Run Code Online (Sandbox Code Playgroud)

html css css-grid

Ezr*_*ab_
2020 12-30
5
推荐指数
1
解决办法
2333
查看次数

CSS Grid - 突出显示单元格直到悬停的单元格

在网格中，我想突出显示一组单元格 - 一个矩形形状 - 从左上角的单元格到鼠标位置下方的单元格。

假设我们的网格最初看起来像这样：

.grid {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: repeat(5, 50px);
  gap: 5px;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightgray;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
    <div class="grid-item">16</div>
    <div class="grid-item">17</div>
    <div class="grid-item">18</div>
    <div class="grid-item">19</div>
    <div class="grid-item">20</div>
    <div class="grid-item">21</div>
    <div class="grid-item">22</div>
    <div class="grid-item">23</div>
    <div class="grid-item">24</div> …
Run Code Online (Sandbox Code Playgroud)

javascript css css-grid

adl*_*adl
2020 07-15
5
推荐指数
1
解决办法
75
查看次数

如何绘制树结构的线条

我使用 css grid 来输出图像中显示的元素的确切结构。唯一缺少的是您在下图中看到的线条。最重要的是代码简洁、干净和 DRY。我在考虑使用伪元素，只是它不会帮助编写可读的代码。

请不要使用SASS

.three {
  display: grid;
  grid-template-rows: repeat(7, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  
  grid-template-areas:
  
     ".  C  ."
     ".  .  B-1"     
     "A  B  B-2"     
     ".  .  B-3"
     ".  D  ."
     ".  E  .";
}

.A   { grid-area: A; }
.B   { grid-area: B; }
.C   { grid-area: C; }
.D   { grid-area: D; }
.E   { grid-area: E; }
.B-1 { grid-area: B-1; }
.B-2 { grid-area: B-2; }
.B-3 { grid-area: B-3; }

.unordered-list {
  background-color: …
Run Code Online (Sandbox Code Playgroud)

css css-grid

Fro*_*yee
2020 09-24
5
推荐指数
1
解决办法
121
查看次数

将包装物品放在网格的中心

我有一个CSS 网格布局，如下所示：

在此处输入图片说明

这对我来说非常有效，但是当我降低屏幕分辨率时，网格的响应能力使网格看起来像这样：

实际上在降低屏幕尺寸之后。

相反，我希望包装项目能够对齐左右空白，它们应该如下所示：

这就是降低屏幕尺寸后的样子。

我怎样才能实现上述目标？这些项目在数量上是动态的。可以有偶数个项目，这将使它看起来更好，因为左右空白将等距。但是，如果项目的数量是奇数，则空格仍应均匀分布。我尝试使用grid-auto-flowand align-items，但它们似乎没有帮助。

.accordioninnergrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.innerbox {
  display: flex;
  border: 1px solid black;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word;
  width: auto;
}

.innerbox>p,
img {
  margin: 1%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="accordioninnergrid">
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p> …
Run Code Online (Sandbox Code Playgroud)

html css css-grid

Cha*_*eep
2020 08-14
5
推荐指数
1
解决办法
122
查看次数

是否可以使用 CSS Grid 代替 Material UI 的网格组件？

该材料的UI组件并网基于Flexbox的，而且运作非常良好。但是，我试图了解使用它与 CSS Grid 相比是否有任何好处，CSS Grid 也非常易于使用。我实际上更喜欢 CSS Grid，但我不想通过使用它来破坏系统的其余部分。它是否会以任何方式干扰 Material UI 的其余部分？

任何见解？提前致谢。

css reactjs css-grid material-ui next.js

Eri*_*oni
2020 08-21
5
推荐指数
1
解决办法
1585
查看次数

Flexbox 网格最多 3 列，最少 2 列？等宽的物品？

我正在尝试创建一个最多 3 列的网格。但是，如果网格中只有 2 个项目，我希望它们拉伸以占据每个空间的 50%。

目前，这一切都在起作用，但如果网格中的项目数量不是 3 的倍数，则剩余项目会伸展以占据其余空间。我希望它们都具有相同的宽度。这可能吗？

这是我有多远：

https://codepen.io/elly175/pen/jOqJNXa

.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0;
  width: 900px;
  box-sizing: border-box;
}

.flex-item {
  box-sizing: border-box;
  padding: 15px 18px;
  font-size: 16px;
  border: 1px solid #777;
  flex: 1;
  min-width: 33.33%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
</div>
<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
  <div class="flex-item">Four</div>
  <div class="flex-item">Five</div>
  <div class="flex-item">Six</div>
  <div class="flex-item">Seven</div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css flexbox css-grid

ell*_*175
2020 09-25
5
推荐指数
1
解决办法
238
查看次数

标签 统计

css ×10

css-grid ×10

html ×6

reactjs ×2

flexbox ×1

javascript ×1

material-ui ×1

next.js ×1

raster ×1

shapes ×1