标签: css-grid

我使用 CSS 网格布局来实现 3 列布局。尽管我已经提到list1跨越 3 行，但list1它只跨越一行。

.wrapper {
  max-width: 940px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}

.wrapper>div {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  padding: 1em;
  color: #5a2916;
}

.item1 {
  -ms-grid-column: 1;
  grid-column-start: 1;
  grid-column-end: 4;
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item2 {
  -ms-grid-column: 1;
  grid-column-start: 1;
  -ms-grid-row: 3;
  grid-row-start: 3;
  grid-row-end: 5;
}

<div class="wrapper">
  <div class="item1">One</div>
  <div class="item2">Two</div>
  <div class="item3">Three</div>
  <div …

当我使用 CSS Grid 时，网格如何将之前和之后作为网格元素。有什么办法可以解决这个问题吗？

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.wrapper::before {
  content: "::before element";
}

.wrapper::after {
  content: "::after element";
}

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

<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>

我在页面中有一个制表符表，它使用 css 网格进行布局。当我调整浏览器大小时，我希望表格随着视图而增大和缩小。这在 css 网格外部时工作正常，但在我的 css 网格内部时失败。使用 css 网格时，制表符表格会在浏览器尺寸调整得更宽时正确展开，但不会在浏览器视图变窄时缩小。相反，会出现滚动条并且表格保持宽。

var data = [
    { name: '1', description: 'Description of thing 1', location: 'Location 1' },
    { name: '2', description: 'Description of thing 2', location: 'Location 2' },
    { name: '3', description: 'Description of thing 3', location: 'Location 3' },
];
var cols = [
    { field: 'name', title: 'Name', width: '20%', widthGrow: 1, widthShrink: 1  },
    { field: 'description', title: 'Description', width: '30%', widthGrow: 1, widthShrink: 1    }, …

我的挑战是：

我想要一个具有固定数量的列（稍后可以通过 javascript 进行调整）和灵活数量的等高行的网格。

行数由网格项（ UI卡）的数量决定。

这些卡片应填满其各自单元格的整个高度，但不得增加行的高度。所以基本上max-height = row-height assigned by grid

然后在这些卡片中我们有典型的三个部分：页眉、正文和页脚。如果存在的列表项多于行高允许的数量，则正文必须是可滚动的。

我尝试在 stackblitz 上实现这个

https://stackblitz.com/edit/angular-3gkmtm

我不明白的是

1. 为什么当出现更多项目时卡片会“拉伸”行
2. 如何在不手动使用固定高度的情况下实现可滚动的卡体部分（就像在示例中我使用最大高度）
3. 为什么超过3行就会溢出

请帮忙！

<article>
  <section>
    <h2>Fixed Gird with scrollable cards</h2>
  </section>
  <section>
    <button (click)="onAdd()">Add</button>
    <button (click)="onRemove()">Remove</button>
  </section>
    <section class="remaining-height">
        <div class="grid-container">
      <div class="grid-item" *ngFor="let card of cards">
      <div class="card">
        <div class="card-header">Card #{{card}}</div>
        <div class="card-body card-flexible-scroll">
          <div class="list-item" *ngFor="let item of list">{{item}}</div>
        </div>
        <div class="card-footer">
            Some Footer
        </div>
      </div>
      </div>
        </div>
    </section>
</article>

article{
  display: flex;
  flex-direction: column; …

我试图了解如何实现一个布局，该布局在第一行中包含两列，在第二行、第三行等中包含三列。

<section>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
</section>

//CSS
section {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

上面的代码将为我提供两列布局，但如何修改它以实现上述布局。

我想仅显示网格的第一行并隐藏其他行。
我知道我们可以通过使用max-height和@media查询来做到这一点，但在这种情况下，网格中每个项目的高度应该相同。
但就我而言，网格中每个项目的高度不相同，因此当我使用上述解决方案时，它无法正常工作。
有没有办法将网格容器的 与第一行中的项目的max-height相同？max-height

我想要一个包含两列的网格，其中最左边的列将根据其内容的宽度进行缩放，但不会超过网格宽度的 33%。

然而，似乎并grid-template-columns: minmax(auto, 33%) auto没有按预期工作。即使内容较小，最左边的列也始终为 33% 宽度。

我可能误解了minmax应该完成的任务。还有其他方法可以实现我想要做的事情吗？

.main {
  display: grid;
  grid-template-columns: minmax(auto, 33%) auto
}

.firstcol {
  background: lightgreen;
}

.secondcol {
  background: lightblue;
}

<div class="main">
  <div class="firstcol">Short text</div>
  <div class="secondcol">Some more text</div>
</div>
<hr />
<div class="main">
  <div class="firstcol">This text is wayyyyyy to long and it should be wrapped</div>
  <div class="secondcol">Some more text</div>
</div>

我有一个类，我们称之为它.col3，它是 div 中的一个网格项，其类为.container

容器有grid-template-columns: 25% 25% 25% 25%

我希望该类.col3跨越 3 列。我知道通常我可以使用：

.col3{
   grid-column-start: 1;
   grid-column-end: 4;
}

但这并没有指定我希望它从第 2 列开始并结束的时间。是否有一个通用的“让这个类跨越 3 列”我可以使用？

我已经尝试了我能想到的所有方法，但无法将“阅读更多”超链接放置在父行的底部，因此“阅读更多”位于容器的右下角。对齐或对齐的组合似乎没有帮助。

文章图像应该位于左侧，然后文章标题位于图像的右侧，“阅读更多”位于整个面板的右下角。我认为最简单的方法是将超链接的列与 v 行的底部对齐，然后仅使用 text-right 进行格式化。

  <v-row>
    <v-col>
      <h1 style='display: inline'>{{article.title}}</h1> <span style='font-size: x-small'>{{article.month}}.{{article.day}}.{{article.year}}</span>
    </v-col>
  </v-row>
  <v-row style='padding: 0px; margin-top: -25px; margin-bottom: -15px'>
    <v-col>
      <hr>
    </v-col>
  </v-row>
  <v-row>     
    <v-col md='4' class='text-center'>
      <img :src="article.image" class='article-image'>
    </v-col>      
    <v-col>
      <v-row>
        <v-col>
          <p>{{article.header}}</p>
        </v-col>
      </v-row>
      <v-row>
        <v-col class='text-center'>
          <a>>>> Read More <<<</a>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

最终的解决方案，包括两个阅读部分：

<template>
<v-container fluid class='content-body'>
  <v-row>
    <v-col cols="12">
      <h1 class="ml-2" style="display: inline">{{ item.title }}</h1>
      <span style="font-size: x-small">{{ item.date }}</span>
    </v-col>
    <v-col style='padding: 0; margin-top: -15px; margin-bottom: -15px' cols="12"> …

我为自己感到非常自豪，因为我设法为客户制作了我想要的自定义网格，但后来我被告知它也需要适用于电子邮件。尝试在网络上寻找不同的 display: grid 替代方案，但找不到任何替代方案。

是否存在这样的替代方案？如果没有的话有什么建议吗？

这是我制作的网格供参考：

<!DOCTYPE html>
<html>
<head>
<style>

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(30px, auto);
  
  
}
.one {
  grid-column: 1 / 16;
  grid-row: 1 / 9;
  background-color: black;
}
.two {
  grid-column: 16 / 21;
  grid-row: 1 / 9;
  background-color: red;
}
.three {
  grid-column: 1/7;
  grid-row: 9 / 12;
  background-color: green;
}
.four {
  grid-column: 15/21;
  grid-row: 9/12;
  background-color: blue;
}
.five {
  grid-column: 1/11;
  grid-row: 12/17;
  background-color: yellow;
}
.six …