How can I hide a column when its width will be less than a certain size in CSS grid?

Question

I am new to CSS grid and am not sure whether it is possible to accomplish the following without resorting to using JavaScript.

I am trying to hide a sidebar when it will be less than 200px wide.

But I only want to show a sidebar when 200px is no more than 40% of the available width.

.grid {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr 0; /* what goes here ? */
  min-height: 100px;
}

.grid .sidebar {
  grid-area: 2 / 1 / 2 / 1;
  background: red;
}

.grid .main {
  grid-area: 2 / 2 / 2 / 2;
  background: blue;
}

<div class="grid">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

For instance, let's say .grid is 400px wide. Then 40% of 400px is 160px, but 200px is more than 160px, so .sidebar should either not display or have 0 width.

But if .grid is 1000px wide, then 40% of 1000px is 400px. Since 200px is less than 400px, it should display with width of 400px.

Is this possible to do with just CSS grid, a combination of CSS grid and other CSS directives, or not possible without JavaScript?

You can use a media query, but it'd be based on the width of the page, not the grid/div. — mpen, Sep 11 '18 at 18:04
I need it to respond to the container unfortunately, because this `div` could be in a big page but in a small container — tacos_tacos_tacos, Sep 11 '18 at 18:04
Hmm... then I dunno. There's been [some talk](https://stackoverflow.com/q/12251750/65387) but nothing implemented. Maybe someone else will chime in. — mpen, Sep 11 '18 at 18:08
See: [Can media queries resize based on a div element instead of the screen?](https://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen) — Joseph Webber, Sep 11 '18 at 18:34
@mpen, thanks for the link to the JS library for Element Queries — tacos_tacos_tacos, Sep 11 '18 at 19:04
https://jsfiddle.net/2b6cf4kw/1/ If this is what you're after. The only requirement: no margin for the parent container/wrapper when being resized from its defined max-width of the page down, i.e. needs to take full screen width, or at least when the .sidebar is closing to its min-width of 200px. — VXp, Sep 11 '18 at 19:31
@VXp actually, I spoke too soon... it looks like it works on JSFiddle because the page is framed, but actually, when you constrain the container to a small width, the sidebar still shows up — tacos_tacos_tacos, Sep 11 '18 at 19:44

score 2 · Answer 1 · answered Sep 11 '18 at 19:39

You can do something like this, if I understand you correctly and this is what you are after:

body {margin: 0} /* recommended */

.grid {
  display: grid;
  grid-template-columns: minmax(auto, 40%) 1fr; /* first column no more than 40%, ever (from 500px up) */
  min-height: 100px;
}

.grid .sidebar {
  /*grid-area: 2 / 1 / 2 / 1;*/
  background: red;
}

.grid .main {
  /*grid-area: 2 / 2 / 2 / 2;*/
  background: blue;
}

@media (max-width: 499.99px) { /* screen width (or the .grid) needs to be at least 500px wide, in order to display the .sidebar, because min-width of 200px is exactly 40% of 500px, so display it when 500px and more, but hide it when less */
  .grid {grid-template-columns: 1fr}
  .grid .sidebar {display: none}
}

<div class="grid">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

Works on a full-page layout, but not in a smaller container – tacos_tacos_tacos Sep 11 '18 at 19:45 — tacos_tacos_tacos, Sep 11 '18 at 19:45

How can I hide a column when its width will be less than a certain size in CSS grid?

1 Answers1