使用网格模板区域/命名区域重叠网格项目 [英] Overlapping grid items using grid-template-areas / named areas

问题描述

我正在尝试CSS网格，这是我正在构建的布局：

I'm experimenting with CSS Grids, and this is the layout I'm building:

.grid {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 4rem 1fr;
  grid-template-rows: 1rem 1fr 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.text {
  /* 
  // Ideally, this should be
  grid-area: text 
  */
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  /* Fix z-index */
  position: relative;
  padding: 4rem;
  background-color: #fff;
}

.image {
  /* 
  // Ideally, this should be
  grid-area: image;
  */
  grid-column: 2 / 4;
  grid-row: 1 / -1;
  background-color: lightgray;
  padding: 1rem;
  /* Center das image */
  display: flex;
  justify-content: center;
}


/* Basic body */

body {
  background-color: #fafafa;
  font-family: sans-serif;
  padding: 2rem;
}

img {
  max-width: 100%;
  height: auto;
}

<div class="grid">
  <div class="text">One morning, when bobby woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his leg like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into
    stiff sections.
  </div>
  <div class="image">
    <img src="http://unsplash.it/400/400" />
  </div>
</div>

（最好在整页中预览...）

我要避免的事情：

.text 和 .image 当前都使用 grid-column：* / *; 语法，相反，我想使用 grid-area：text 和 grid-area：image; 。

.text and .image both currently are using grid-column: * / *; syntax, instead I'd like to use grid-area: text and grid-area: image;.

是否可以将 grid-template- {columns | rows} 定义为重叠区域？我尝试使用第二种定义方式网格区域
，但这似乎不起作用。

Is it possible to define grid-template-{columns|rows} as overlapping areas? I tried using second way of defining grid areas , but that didn't seem to work.

您似乎无法做到 [a-start] [b-start] [a-end] [b-end] 的语法，或者至少我没有做到。

Looks like you can't do [a-start] [b-start] [a-end] [b-end] in that syntax, or at least I didn't manage to.

所以-有没有办法使用named创建重叠的网格

我只是为了方便起见而使用命名区域-以便更容易地推理出响应式布局代码，而不是重复自己在媒体查询中多次。

I'm trying to use the named areas for convenience purely - so that it's easier to reason about the responsive layout code, instead of repeating myself multiple times in media queries.

编辑
因为下面的@vals答案而找到了答案。

Edit Found the answer because of @vals answer below.

这似乎工作得很好，我可能在上次尝试中遇到了语法错误：

This seemed to work just fine, I probably made a syntax error in my previous attempt somewhere:

grid-template-columns: [text-start] 1fr [image-start] 4rem [text-end] 1fr [image-end];
grid-template-rows: [image-start] 1rem [text-start] 1fr [text-end] 1rem [image-end];

推荐答案

至少在更基本的布局中，为我工作：

At least in a more basic layout, it seems to work for me:

.container {
  border: solid 1px green;
  height: 180px;
  width: 300px;
  display: grid;
  grid-template-columns: [left-start] 100px [right-start] 100px [left-end] 100px [right-end];
  grid-template-rows: [left-start] 60px [right-start] 60px [left-end] 60px [right-end];
}

.left {
  grid-area: left;
  background-color: red;
}

.right {
  grid-area: right;
  background-color: lightgray;
  opacity: 0.5;
}

<div class="container">
  <div class="left">
  </div>
  <div class="right">
  </div>
</div>

这篇关于使用网格模板区域/命名区域重叠网格项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！