标签: css-grid

基于上一个问题,我正在尝试为我的网格布局添加更大的块.在最后一个问题中,我需要一个div跨度多行.现在的问题是我需要一个div来跨越多个行和列.

如果我有一个五行元素,我怎么能在它的中间放置更大的元素？(因为float它自然而然地放在一边).

这是一个示例代码段:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}
.larger{
  height: 110px;
  width: 190px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我不想display: grid用于包装元素,因为我可以使用 状态这是一个非常先进的技术.我希望有一个非网格,非表格解决方案.

以下是我希望从上面的代码段中获得的内容

尝试使用css网格实现下图中的重复模式:

尝试使用CSS网格,请参阅代码笔

.parent {
  display: grid;
  grid-gap: 20px;
  direction: rtl;
  padding-bottom: 20px;
}

.item--img-cont img {
  width: 100%;
}

.item--text-cont {
  color: white;
}

.item {
  background: black;
}


/*START:Desktop Style */

@media screen and (min-width:1280px) {
  .parent {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(10n+1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .item:nth-child(10n+10) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
  }
}


/*END:Desktop Style */

<!--START:  Set 1-->
<div class="parent">
  <!--START: …

我正在使用 CSS 网格布局来定位网站上的各个部分。我使用grid-column: x / x;和grid-row x / x;来设置它们在页面上的位置和大小。它工作得很好。

现在，我正在尝试在屏幕尺寸更改时发生的两个网格列修复之间的平滑过渡设置动画。变化是 from grid-column: 3 / 9;，grid-column: 2 / 10;这意味着 div 在1fr每一侧都增长。目前它只是“ping”到位，但我希望两者之间有一个平稳的过渡。

任何人有任何想法如何解决它？

这是我的 CSS 文件中的片段：

nav {
    background-color: $company-blue;
    border          : 3px solid $company-yellow;
    opacity         : 0.8;
    grid-column     : 3 / 9;
    grid-row        : 3 / 4;
    ...
    @media screen and (max-width: 1378px) {
    grid-column : 2 / 10;
    }
}

我有一个CSS网格,我正在尝试将justify-items属性设置为start.

这个(或与之相关的任何其他属性)都不起作用,在我的文本编辑器(atom)中,它显示为灰色,通常表示错误.

我看过规范,这个属性肯定是规范的一部分,甚至找到了它的视频教程.

当我使用它虽然它不起作用,我无法理解为什么.

当我将代码复制到codepen时,它仍然无法正常工作.

这里的代码:https://codepen.io/emilychews/pen/EvLPgJ

.gridwrapper {
  background: #e6e6e6;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-items: start; /* THIS LINE ISN'T WORKING */
  align-items: stretch;
}

.gridwrapper div:nth-child(1) {
  grid-column: 1 / 4;
}

.gridwrapper div:nth-child(6) {
  grid-column: 1 / 3;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  border: white;
  width: 100%;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}

<div class="gridwrapper">
  <div class="grid …

对于FreeCodeCamp赋值,我在CSS Grid Layout中创建了一个iOS Calculator克隆.运行它的JavaScript适用于以后; 我现在专注于设计.

最终结果应如下所示:

html {
  font-size: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  grid-auto-rows: minmax(700px, auto);
}

.wrapper>div {
  padding: 0;
}

.nested-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.nested-1>div {
  font-family: "Roboto", sans-serif;
  font-size: 0.6rem;
  color: white;
}

.top-bar {
  padding-top: 0.3rem;
}

.flight-modus {
  justify-self: start;
  padding-left: 0.3rem;
}

.charge-status {
  justify-self: end;
  padding-right: 0.3rem;
}

.nested-2 {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
  justify-items: end;
}

.nested-2>div {
  font-family: …

我开始使用 CSS 网格（非常棒！）。我从最基本的布局开始：移动布局。此外，随着网页的增长，我正在使用媒体查询来更改布局。

现在，我的布局由 3 个区域组成。确切的顺序是内容区、侧边栏区和评论区。该评论区是可选的，甚至有可能不会显示。区域之间有40px的间隙。

这是移动布局css

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-gap: 40px;
}

如果评论区不存在，评论区的间隙也不存在，这就是我想要的。

https://jsfiddle.net/p54od8ho/

当页面增长时，我正在更改布局，如下所示：

@media screen and (min-width: 768px) {
  .content {
    grid-area: content;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .comments {
    grid-area: comment;
  }
  .grid {
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto;
        grid-template-areas:
            "content sidebar"
            "comment sidebar";
  }
}

https://jsfiddle.net/g20gtd4z/

40px的差距是因为评论区存在。

但是，当评论区不存在时会发生这种情况：

https://jsfiddle.net/6Lfg55my/1/

如果您注意到，即使评论区不存在，40px 的差距也存在。

我相信一个解决方案是创建一个类，只是为了删除评论区。

.grid.no_comment {
            grid-template-areas:
                "content sidebar"
                ". sidebar";
      }

必须有更好更简单的方法（或者可能没有）。有没有办法，只使用网格选项，当评论区不存在时，差距也消失了？

我想弄清楚如何使网格的两列具有相同的高度。这是我所追求的：

xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx 

X qqqqqqqqqqqqq X X qqqqqqqqqqqqqqq X 

X qqqqqqqqqqqqq X X qqqqqqqqqqqqqqq X 

XX X qqqqqqqqqqqqqqq X 

XX X qqqqqqqqqqqqqqq X 

xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

这是 x 代表网格的边界（显示：网格）而 q 是标签和输入字段的地方。这是 codepen 上的所有代码和相同的链接。

.container {
    font-family: Arial, Helvetica, Sans-Serif;
    color: #666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #666;
    background-color: #fff;
    height: 100%;
}

.outerGrid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr 1fr;
  grid-template-rows: 80px 1fr 1fr 30px;
  grid-gap: 20px;
  grid-template-areas: 
    "title title title title" 
    ". …

是否可以创建一个grid-template-area定义某些区域（如页眉和页脚）的，同时允许在它们之间创建未知数量的行？

我将拥有用户生成的内容，所以我不知道要划分多少行。我想确保第一个和最后一个是页眉和页脚。

幻想示例：

#grid {
    display: grid;
}

.big {
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "header header header"
    "misc misc misc"
    [* * *] <---- unknown rows
    "footer footer footer";
}

.small {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "header"
    "misc"
    [*] <---- unknown rows
    "footer";
}

使用CSS网格,我试图创建一个网格(有时)占用多于100%包含元素的高度.怎么能实现这一目标？

创建共同拍摄的3行时,100%显式网格显示得很好:

https://codepen.io/tommedema/pen/dKqwrZ?editors=1100#0

但是,如果先前的行占用超过100%,则第三行突然消失,即使它已明确定义:

https://codepen.io/tommedema/pen/jKvdOO?editors=1100#0

请注意,没有滚动条进一步下降40%(140 - 100),我原本预计会有这种情况.

更新的问题

当grid-row从第一行到最后一行明确定义到至少一个子节点时,溢出(和滚动条)确实显示.这是令人惊讶的,因为我预计它会溢出而没有这样的陈述:

新CSS:

html, body {
  height: 100%;
}

body {
  background-color: #ddd;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20% 100% 20%;
}

/* 
  allows for row overflow to not be cropped
  see also https://stackoverflow.com/questions/51048661
*/
body::after {
  content: "";
  grid-row: 1 / -1;
}

https://codepen.io/tommedema/pen/MXqRPW?editors=1100#0

更令人惊讶的是,当您使用相同的设置将网格放入此网格中时,该::after技巧对于此内部网格不起作用.

有人在这里提出了类似的问题，但答案只有在页面上的每个元素都自动放置并且仅占据一列的情况下才有效。

我有一个12列的网格布局，其中前三行全部由一个跨越所有十二列的元素占据；那么我有三行自动放置的元素，每行占据六列。

尽管我可以根据先前的答案进行数学计算，但认为元素的计算位置未存储在Javascript可访问的任何位置似乎有些荒谬。

如果访问有关网格的计算出的CSS属性，则只会得到“自动”和“跨度6”，而不是实际计算出的行首或行尾数。真的没有办法访问grid-row和grid-column的计算值吗？