标签: css-grid

网格在 Chrome 和 Safari 中没有响应（卡在 980 像素窗口宽度）

问题是：当更改 Chrome 或 Safari 中窗口的宽度时，我的网格元素会创建 1 个额外行以适合其子元素，当窗口进一步缩小时，它不会创建更多行，只会保留 2 行相反，它开始调整自身大小（图 3）。

这是我第一次看到这个问题，老实说，无法理解我在那里缺少什么。

我在 Firefox 中测试了相同的 HTML 文件——它按预期工作（图 1）。网格工作得很好，可以根据需要创建尽可能多的行来容纳其所有子项。我在 CodePen 中复制了相同的样式和结构，并且它在 Chrome 中的 CodePen 页面上运行良好（图 2），但是如果我下载我的 CodePen 项目并像 HTML 文件一样在 Chrome 或 Safari 中打开它 - 它具有相同的效果问题（图3）。

我将不胜感激任何建议或更正。谢谢你的时间。

CodePen链接： https: //codepen.io/vkharlakov/pen/wvjEgWM

超文本标记语言

<html>
  <body>
    <main>
      <section>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </section>
    </main>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: plum;
}

main { …

Run Code Online (Sandbox Code Playgroud)

window-resize responsive-design css-grid

Vit*_*kov

2022 10-14

1
推荐指数

1
解决办法

234
查看次数

使用CSS网格的CSS网格框架

我正在尝试找到一个支持CSS网格系统的框架.到目前为止,Google搜索主题只给了我基于浮点数和Flexbox的框架.它可能是"css grid"这个词,这让Google很难真正找到我想要的东西.

有人找到了他们可以推荐的好框架吗？

css css-frameworks css3 grid-layout css-grid

Mar*_*K81

2017 08-14

0
推荐指数

1
解决办法

343
查看次数

我可以为CSS网格布局组件设置动画吗？

有没有办法为使用CSS网格布局显示的数组中组件的更改顺序设置动画？

这是一个简短的样板

css animation css3 reactjs css-grid

ugr*_*pla

2018 08-21

0
推荐指数

1
解决办法

747
查看次数

带边距/填充的 CSS 网格全屏

使用 CSS 网格，我需要一个带有固定页眉、导航和页脚的全屏，只有文章是 Flex 的。

With margin = 0px it is OK

但是 margin = 10px 就不行了since footer is not fixed below

如何保持全屏固定页眉、导航和页脚（只有文章是弹性的）以及边距 = 20px？

css margin fullscreen css-grid

Ari*_*e B

2019 02-11

0
推荐指数

1
解决办法

1万
查看次数

在 JavaScript 中使用 CSS Grid repeat() 声明

我需要了解如何repeat()在 JavaScript 中利用from CSS Grid 来执行以下操作：

let variable = prompt("number");

el.style.setProperty('grid-template-columns: repeat(variable, 1fr)')

执行以下操作也不起作用：

el.style.setProperty('grid-template-columns: repeat(' + variable + ', 1fr)')

我试过在中连接变量，repeat()但它没有通过。

javascript css css-grid

Azh*_*bai

2018 09-29

0
推荐指数

1
解决办法

1550
查看次数

网格显示列的宽度不相等

和

grid-template-columns:1fr 1fr;

Run Code Online (Sandbox Code Playgroud)

2 列在小（窄）屏幕中具有不同的宽度。我无法理解。感谢您的任何帮助。

css css-grid

Mit*_*tyu

2019 01-09

0
推荐指数

1
解决办法

1946
查看次数

Css Grid：居中对齐 2 行中不同数量的项目

我必须div在两行中放置 7 s（图像），在第一行中放置3 个，在第二行中放置 4 个。顶部 3 divs 应该居中，底部 4 可以占据所有空间。

这是我所做的：

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr repeat(3, 170px) 1fr;
  grid-template-areas: ". item1 item2 item3 ."
                       "item4 item5 item6 item7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

.content.box:nth-child(1) {
  grid-area: box1;
}

.content.box:nth-child(2) {
  grid-area: box2;
}

.content.box:nth-child(3) {
  grid-area: box3;
}

.content.box:nth-child(4) {
  grid-area: box4;
}

.content.box:nth-child(5) {
  grid-area: box5;
}

.content.box:nth-child(6) {
  grid-area: …

Run Code Online (Sandbox Code Playgroud)

html css alignment css-grid

Zoh*_*jaz

2019 02-17

0
推荐指数

1
解决办法

2379
查看次数

如何使网格中的项目适合一行？

我正在尝试使 3 个 div 适合网格。但是，我想将代码重用于可能有多个网格的其他网格。这是可能的还是我应该单独编写代码？

  <div class="div-wrapper">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

.div-wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:5px;
  width:100%;
  height:10vh;
  background:black;
}

Run Code Online (Sandbox Code Playgroud)

但是，我想将上面的代码用于内部超过 3 个 div 的其他包装器，例如

    <div class="div-wrapper">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
      <div class="div5"></div>
    </div>

Run Code Online (Sandbox Code Playgroud)

html css css-grid

And*_*oke

2019 03-01

0
推荐指数

1
解决办法

1971
查看次数

使用CSS网格，第一行2列，之后每列3列

我试图实现一个布局，第一行有2列，此后有3列，就像附加的图像一样。我正在使用css grid。

到目前为止，这是我的代码

body {
  background: #161616;
  color: #bdbdbd;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

h1 {
  font-weight: 300;
}
a {
  color: white;
  text-decoration: none;
  color: #4d4d4d;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.feature__item {
  background-color: #C4C4C4;
  padding: 15px;
  color: #4d4d4d;
}

.feature__item:first-of-type{
  grid-column-start: 1;
  grid-column-end: 3;
}

.feature__item:nth-child(2) {
  
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="feature__item">
    <h5>Heading</h5> …

Run Code Online (Sandbox Code Playgroud)

css css-grid

Zub*_*ber

2019 07-02

0
推荐指数

1
解决办法

18
查看次数

使用没有装订线的网格 css 显示不同高度的动态卡片

如何使用css3创建动态网格系统。我想实现一个包含多张不同高度卡片的概览页面，并且显示卡片的顺序应该相同。

不同高度的卡片将根据配置设置显示在仪表板上，因此应自动调整。请帮助我为它编写通用的 css。

HTML:

<div class="wrapper">
  <div style="height:50px" id="foo-1">One</div>
  <div style="height:50px" id="foo-2">Two</div>
  <div style="height:50px" id="foo-3">Three</div>
  <div style="height:100px" id="foo-4">Four</div>
  <div style="height:50px" class="fifth" id="foo-5">Five</div>
</div>


CSS3:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 10px;
 }

Run Code Online (Sandbox Code Playgroud)

请参考：https : //codepen.io/prashantbiradar92/pen/MWgXGpG?&editable=true

问题：

id 为 foo-1,foo-3,foo-5 的 div 应该在 1 列中，foo-2, foo-4 应该在第 2 列中，没有空格。它应该按顺序显示。所以目前有 div foo-5 的排水沟。所以我必须调整div foo-5。

html css css-grid

Pra*_*dar

2019 10-11

0
推荐指数

1
解决办法

2226
查看次数