DEV Community

Discussion on: CSS Container Queries

View post
Collapse
 
billraymond profile image
Bill Raymond •

Thanks for this great article and also one of my favorite scenes from The Matrix :-)

Sometimes I am working with CSS Grids and I would like to draw a box around them, mostly for testing purposes. Using a code sample from the LayoutIt Grid, I can draw a red box around the grid container, like this:

.grid-container * {
  border: 1px solid red;
  position: relative;
}

.grid-container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
}
Enter fullscreen mode Exit fullscreen mode

Unfortunately, that method draws a box around the grid and any items contained within (like an image or an href for example). Could I use a CSS Container query to draw a box only around a grid? Or maybe only around grids contained within a certain grid? I'm not necessarily looking for you to provide the code (although that would be welcome), but more to understand if that is an approach I can use.

Thanks again!

Collapse
 
link2twenty profile image
Andrew Bone •

Unfortunately it can't really help with that but dev tools (in both chrome and firefox) have great grid inspection support.

developer.chrome.com/docs/devtools...
developer.mozilla.org/en-US/docs/T...

Collapse
 
billraymond profile image
Bill Raymond •

That is too bad. I have used the grid dev tools but was hoping there would be a better option to highlight items without having to go into inspection tools. Thank you for the response and for the great article! I had not realized how important this will be until your simple explanation!