Grid-Area Does Not Seem to Work with the Attr Function, Is This by Design

grid-area does not seem to work with the attr function, is this by design?

Yes it's by design as attr() is acutally only suppored with content. As defined in the current specification it's a value for content.

You can also read in MDN:

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

So it may work with other properties but this is still in draft mode

---

An alternative is to consider CSS variables where you will almost have the same thing to write but it will not work with content because it's not a string. For the content you can replace this with counters:

section {

  outline: 1px solid red;

  display: grid;

  grid-gap: 10px;

  grid-template-areas: 

  "a1 a1 a1 a1" 

  "a2 a2 a3 a3" 

  "a2 a2 a4 a5" 

  "a6 a6 a6 a6" 

  "a7 a8 a9 a9" 

  "a7 a0 a0 a0";

    

  counter-reset:g;

}

div {

  display: flex;

  grid-area: var(--c);

  outline: 1px dotted green;

}

div:before {

  margin: auto;

  counter-increment: g;

  content: "a" counter(g);

}

<section>

 <div style="--c:a1"></div>

 <div style="--c:a2"></div>

 <div style="--c:a3"></div>

 <div style="--c:a4"></div>

 <div style="--c:a5"></div>

 <div style="--c:a6"></div>

 <div style="--c:a7"></div>

 <div style="--c:a8"></div>

 <div style="--c:a9"></div>

 <div style="--c:a0"></div>

</section>

Why is my CSS Grid Area not behaving like it should?

Could you describe what your goal is? Maybe make a screenshot of what you want it to look like?

Also, I've noticed you're using huge dimensions in your classes.
For example:

.wrapperFour {
height: 900vh;
background-color: tan;

display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(9,100vh) ;
}

you set the wrapper height to be 900vh.
This means the height is 9 times your screen's height (vh = view height)

Did you mean to set it this way?

another hint that might help you:

If you go to dev tools in chrome, and place the marker on your grid, you can see the layout that's rendered to the screen. Then you can try and play with the css properties and watch how your elements are aligned.

This is what it looks like with your snippet

CSS Gridlayout Child not adhering to grid-template

In your question, you say

As clearly can be seen from my code snippet the section-top (yellow border) and its col1 (green border) along with col2 (green border) children is not following the set attributes.

But col1 and col2 are not children of section top, they are grand-children of it.

You can set the style that you are applying to section-top to the form grading, and then the grid styles will work

use data-attr to dynamically pick css custom property

If you are not averse to using a small piece of Javascript to perform the necessary assignments then perhaps this might be of interest.

This uses getComputedStyle and getPropertyValue to retrieve the variables and setProperty to assign the dynamically created style to the elements.

let root=document.documentElement;
let col=document.querySelectorAll('div[data-type]');
    col.forEach( n=>{
      n.style.setProperty('background-color',getComputedStyle(root).getPropertyValue('--'+n.dataset.type+'-bg') );
      n.style.setProperty('border',['1px solid',getComputedStyle(root).getPropertyValue('--'+n.dataset.type)].join(' '));
    });

:root{
  --warning: rgb(230, 126, 34);
  --warning-bg: rgba(230, 126, 34, 0.1);

  --important: rgb(52, 152, 219);
  --important-bg: rgba(52, 152, 219, 0.1);

  --caution: rgb(231, 76, 60);
  --caution-bg: rgba(231, 76, 60, 0.1);
}

[data-type]{
  padding: 12px;
  margin: 12px;
}

<div class='block' data-type='warning'>
  <span>Block: Warning</span>
</div>

<div class='block' data-type='important'>
  <span>Block: Important</span>
</div>

<div class='block' data-type='caution'>
  <span>Block: Caution</span>
</div>

Why are grid items not centered?

The Problem

When you don't define the grid column widths using grid-template-columns (for explicit grids) or grid-auto-columns (for implicit grids), the width of each column is left to auto. This means that the widths are determined by the content.

You've defined the layout with grid-template-areas:

grid-template-areas:  "a a b b"
                      "c c c d"
                      "e e e f"
                      "g g g g" ;

But you haven't defined the columns, so they are left to their own devices.

In this case, the auto columns result in a visual (but not actual) misalignment in your grid:

As seen in Chrome:

---

Solutions

Since you are working with a four-column implicit grid, you can add this rule to your grid container to fix the problem.

grid-auto-columns: 1fr

Now, instead of the container distributing space based on content size, it distributes space evenly among columns.

Chrome, with the adjustment above:

revised codepen

You can also fix the problem with this rule:

grid-template-columns: repeat(4, 1fr);

revised codepen

---

Browser Variations

By the way, your layout renders differently across Grid-supporting browsers.

Chrome

Firefox

Edge

(I didn't test in Safari.)

Basically, in Firefox and Edge the range input looks like its locked into the first column and doesn't honor the grid-template-areas rule.

This is because of a default setting on this type of input set by these browsers:

Firefox

So basically these inputs are set to width: 12em.

To fix the problem, add this to your code:

input { width: auto }

Now everything should work across all Grid-supporting browsers.

revised codepen

body { margin: 0; background: #0d0d0d; }

#center{width:2px;height:100%;position:absolute;left:calc(50% - 1px);background:red;}

#grid {

  width: 80%;

  height: 30%;

  position: absolute;

  top: 35%;

  left: 10%;

  display: grid;

  grid-template-areas:

    "a a b b"

    "c c c d"

    "e e e f"

    "g g g g"

    ;

  grid-gap: 10px;

  color: #fff;

  box-sizing: border-box;

  border: dotted yellow 1px;

  grid-auto-columns: 1fr; /* NEW */

}

input { width: auto; } /* NEW */

#a, #b { display: flex; justify-content: center; align-items: center; }

#a, #b, #d, #f, #g { background: #1a1a1a; }

#a { grid-area: a; }

#b { grid-area: b; }

#c { grid-area: c; }

#d { grid-area: d; }

#e { grid-area: e; }

#f { grid-area: f; }

#g { grid-area: g; }

<div id="center"></div>

<div id="grid">

  <div id="a">A</div>

  <div id="b">B</div>

  <input type="range" id="c">

  <div id="d"></div>

  <input type="range" id="e">

  <div id="f"></div>

  <div id="g"> </div>

</div>

---

Related Topics