Multi tool use

Clash Royale CLAN TAG

Is there a direct way to target empty grid cells (.) in a grid-template-areas?

Let's say you have grid-template-areas that look like this

grid-template-areas

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


Is there a way to target the css for the . cells to make them a different background color for example?

.

1 Answer
1

The unnamed grid areas in grid-template-areas are CSS. So you're asking if there's a way to target CSS with CSS. The answer would be no. CSS is used to target HTML. (Although an argument could be made with regard to CSS pseudo-elements).

grid-template-areas

Here are three ways to work around the problem:

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>

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>

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.