Css grid hide column

[el_zorro]

Hello, let’s say you have a simple grid: it has a header, a footer, and in the middle it has 3 columns. Also, you have a button that toggles the visibility of the rightmost column

After pressing the button

<div 
style={{position: "relative", display: "grid", width:"100vw", height:"100vh", 
gridTemplateColumns: "411px auto 200px" , 
gridTemplateRows: "1cm auto 1cm", 
gridTemplateAreas: "'header header header'
 'left_content center_content right_content'
 'footer footer footer'"}}>

I have not found yet a way to do this with selectors, only by replacing the whole ```
gridTemplateColumns definition. Any ideas are welcome.

Thanks

[PaulOB]

@el_zorro

I have not found yet a way to do this with selectors,

Not really sure what you mean by selectors in this context?

Why are your styles inline and is this a pre-requisite for this design?

What is wrong with just changing the template columns value?

I’d probably use flexbox for this and you wouldn’t need to adjust the css at all apart from hiding the column.

If you can answer the above questions then we can look at a grid solution if that is the way you want to go.

Here’s a grid version anyway that achieves the toggle by spanning the two columns.

.hide .content {
  grid-column: 2 / 4;
}

[el_zorro]

Hello,

1. Yes, I mean css selectors, Ideally, something in the likes of nth-child(3) to reference the 3rd column and be able to set its display property at will.

2. No, it’s not a prerequisite. I just wrote the code that way for simplicity’s sake.

3.AFAIK, Nothing wrong. It’s just I am more of a backend dev, so I am not sure if changing the
gridTemplateColumns property for this use case is a good practice or a hack. In the past, when faced with use cases that require hiding things, I am accustomed to use selectors to get the element and then set its display to none.

Thanks for your suggestions and code samples.

[PaulOB]

@el_zorro

It’s just I am more of a backend dev, so I am not sure if changing the
gridTemplateColumns property

I suggest you follow the examples in the codepens above and just use css to control everything. The js can just toggle a class and then the css can do all the rest. I dislike JS writing inline styles as that just complicates everything.

In the above Grid codepen I just added a class of hide to the page-wrap and then used css to hide the columne and change the spanning of the middle column.

e.g.

.hide .right-sidebar {
  display: none;
}
.hide .content {
  grid-column: 2 / 4;
}

I would avoid nth-child unless you absolutely know that the html will never change. It only takes a co-worker to add another column and not realise you have scripts or css targeting the nth item. Much better to have a class on the element to start with and then you can’t go wrong.

I believe the examples above have all you need to get this working now

[el_zorro]

I studied the code and it helped me to better understand some concepts that were not so clear to me. Thanks a lot.