时间戳

首页 > 解决方案 > 是否有直接的方法来定位网格模板区域中的空网格单元（。）？

html - 是否有直接的方法来定位网格模板区域中的空网格单元（。）？

问题描述

假设你grid-template-areas看起来像这样

 .grid {
   grid-template-areas: 
   ". . a a a a a . ."
   ". . b b c c c . ."
   ". . b b c c c . ."
   }

例如，有没有办法将.单元格的 css 定位为使它们具有不同的背景颜色？

标签： htmlcsscss-grid

解决方案

中未命名的网格区域grid-template-areas是 CSS。所以你问是否有办法用 CSS 来定位 CSS。答案是否定的。CSS 用于定位 HTML。（尽管可以对 CSS 伪元素进行争论）。

以下是解决此问题的三种方法：

  1. 创建“空”的可定位 HTML 元素。

main {
  display: grid;
  grid-template-rows: 30px 30px 30px;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 5px;
  grid-template-areas: 
   "x x a a a a a y y"
   "x x b b c c c y y"
   "x x b b c c c y y";
}
   
header        { grid-area: a; background-color: lightgreen; }
article       { grid-area: b; background-color: pink; }
aside         { grid-area: c; background-color: aqua; }
.empty-area-1 { grid-area: x; background-color: gray; }
.empty-area-2 { grid-area: y; background-color: gray; }
<main>
  <div class="empty-area-1"></div>
  <header>header</header>
  <article>content</article>
  <aside>aside</aside>
  <div class="empty-area-2"></div>
</main>

  1. 创建“空”的可定位 CSS 伪元素。

main {
  display: grid;
  grid-template-rows: 30px 30px 30px;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 5px;
  grid-template-areas: 
   "x x a a a a a y y"
   "x x b b c c c y y"
   "x x b b c c c y y";
}

main::before {
  grid-area: x;
  background-color: gray; 
  content: "";
}

main::after {
  grid-area: y;
  background-color: gray;
  content: "";
}
   
header        { grid-area: a; background-color: lightgreen; }
article       { grid-area: b; background-color: pink; }
aside         { grid-area: c; background-color: aqua; }
<main>
  <header>header</header>
  <article>content</article>
  <aside>aside</aside>
</main>

  1. 如果定位仅限于背景颜色，则将颜色应用于容器：

main {
  display: grid;
  grid-template-rows: 30px 30px 30px;
  grid-template-columns: repeat(9, 1fr);
  background-color: gray;
  grid-template-areas: 
   ". . a a a a a . ."
   ". . b b c c c . ."
   ". . b b c c c . .";
}
   
header  { grid-area: a; background-color: lightgreen; }
article { grid-area: b; background-color: pink; }
aside   { grid-area: c; background-color: aqua; }      
  
<main>
  <header>header</header>
  <article>content</article>
  <aside>aside</aside>
</main>

推荐阅读