标签: css-grid

有没有办法将单个grid-row-gap特定大小设置为与网格的其余部分不同？

使用案例:网格的顶行与第二行的间距应小于网格的其余部分,因为它充当标题.

我想展示一系列未知数量的扑克牌.要做到这一点,如果有太多,他们将不得不重叠.我无法说服弹性盒与卡片重叠而不缩小它们.以下示例缩小了卡片.我试过了flex-shrink: 0,但后来max-width没有得到尊重.

.cards {
  display: flex;
  max-width: 300px;
}

.card {
  width: 50px;
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
}

<div class='cards'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>

有没有办法在两个display: grid/-ms-grid样式表中使用这两个样式表,或者我是否必须使用HTML hack或JavaScript来查询使用网格布局查看页面的浏览器类型？

例:

以下样式似乎不起作用

.container {
  display: grid -ms-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(150px, 50px);
  grid-gap: 1vw;
  -ms-grid-columns: repeat(4, 1fr);
  -ms-grid-rows: repeat(150px, 50px);
  -ms-grid-gap: 1vw;
}

我希望使用CSS Grid来反转两个并排div的明显顺序,其中一个div任意增长(我不想使用浮点数).

我在这里创建了一个plunkr:http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7？p = preview

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

.a {
  background: yellow;
}

.b {
  background: blue;
  color: white;
}

#container>.a {
  grid-column: 1;
}

#container>.b {
  grid-column: 2;
}

#container.reverse>.a {
  grid-column: 2;
}

#container.reverse>.b {
  grid-column: 1;
}

<div id="container" class="reverse" style="width: 800px;">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

它的关键在于,当我.reverse应用了类(因此你应该看到B | A)时,B它会偏移到一个新行,所以它看起来更像:

          | A
B

如果我颠倒的文件排序.a用.b,这又回到了正常(当然,如果我把.reverse班,我得到了同样的问题).

为什么会这样,我该如何解决？

是否有一个模拟flex-grow了电网的财产？

我希望我的网格区域能够容纳他们收到的内容,但是有些区域比其他区域更flex-grow适合flex.

实际上,在下面的例子中,我想

• 将turquoise是无形的,因为它可容纳它的内容.
• 该footer是无形的,以及因为它没有任何内容.
• 中间部分采用页面的其余部分flex-grow.

更实际的是,我想要这个代码:

.ctnr {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

.test {
  background: black;
  height: 1rem;
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
  background: yellow
}

<div class="ctnr">
  <header>
    <div class="test"></div>
  </header>
  <nav></nav>
  <main></main>
  <footer></footer>
</div>

像这样的代码:

.ctnr …

我想让下面的html显示在n个相等的列中是否有两个,三个或更多的子元素使用css网格到行元素 - Flexbox使这很容易但我无法使用css网格完成 - 任何帮助非常感谢.

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

我有一个简单的网格布局，带有网格间隙和定义的网格区域。然而，并非所有区域始终都有内容。如果一个区域没有内容，我不希望项目之间有双倍的间隙。有没有办法忽略空白区域的间隙，而不使用不同的网格模板，以忽略项目之间的双重间隙？

例子：

.grid {
  display: grid;
  grid-template-areas: "area-1" "empty-area" "area-3" "area-4";
  grid-template-columns: auto;
  grid-gap: 20px;
}

.area-1 {
  grid-area: area-1;
  background: red;
}

.area-3 {
  grid-area: area-3;
  background: green;
}

.area-4 {
  grid-area: area-4;
  background: blue;
}

<div class="grid">
  <div class="area-1">Hello</div>
  <!-- empty area is missing -->
  <div class="area-3">World</div>
  <div class="area-4">!</div>
</div>

我正在玩CSS网格布局,并遇到了一个我无法找到答案的问题.

请考虑以下示例:

:root {
  --grid-columns: 12;
  --column-gap: 10px;
  --row-gap: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns)));
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  justify-content: center;		
} 

[class*=l-] {
  border: 1px solid red;
}

.l-1 {
  grid-column-start: span 1;		
}

.l-2 {
  grid-column-start: span 2;
}

.l-3 {
  grid-column-start: span 3;
}

.l-4 {
  grid-column-start: span 4;
}

.l-5 {
  grid-column-start: span 5;
}

.l-6 {
  grid-column-start: span 6;
}

.l-7 {
  grid-column-start: span 7;
}

.l-8 {
  grid-column-start: span …

我正在尝试为我的网格块中的行创建模板:

grid-template-rows: repeat(3, 150px);

我知道,这个模板应该适用于前3行.但是,从4行开始,这个模板不起作用.
我可以为所有行制作模板吗？

PS此模板仅适用于第1行.

grid-template-rows: 150px;

我试图通过使用鼠标拖动列分隔符(或调整占位符大小)来动态调整css网格布局框的大小.

我resize: horizontal;在nav元素上设置了调整大小,当我在元素的右下角拖动小调整大小手柄时它会被调整大小,但相邻列的宽度不会自动调整而导致重叠.这是一个破碎的codepen.

HTML:

<main>
 <nav>#1</nav>
 <header>#2</header>
 <section>#3</section>
</main>

CSS:

main {
    display: grid;
    border: 3px dotted red;
    grid-gap: 3px;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px 1fr;
    height: 100%;
}

nav {
    grid-column: 1;
    grid-row: 1;
    grid-row: 1 / span 2;
    resize: horizontal;
    overflow: scroll;
    border: 3px dotted blue;
}

我希望css网格引擎自动处理这种情况,但显然它没有.

我尝试使用jquery-ui可调整大小,但它似乎不适用于css网格.

我正在研究如何通过将grid属性grid-template-columns/rows:设置为动态值来使用jquery来完成它,但是不清楚如何通过resize句柄调整元素大小来捕获抛出的事件.jquery resize事件仅在window对象上触发,而不是在dom元素上触发.

在不必处理像dragstart/dragend这样的低级鼠标事件的情况下,可能有什么办法呢？