search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

make first column fit available space #139

Closed jmls closed 6 years ago

jmls commented 6 years ago

I have three columns defined in a grid-column. If all three are not hidden, then I want the left and right columns to be of equal width, and the middle column 60px.

If only the first column is visible, I want it to take 100% of the horizontal space

I so nearly got it with this codepen:

https://codepen.io/anon/pen/oyLJwg

If you add display: none; to #2 and #3 then the first column is grown to fill all available space.

The only problem is that all three columns are the same size . If I add width: 60px; to the middle column, then it is 60px, but still spans 1 col

what do I need to make this work as I intended ?

webcraftsman commented 6 years ago

@jmls I believe you want to change line 4 in your CSS to grid-template-columns: 1fr 60px 1fr;

https://codepen.io/webcraftsman/pen/KeMLRP

jmls commented 6 years ago

@webcraftsman thanks for the input : but if I add display: none; to cols 2 & 3 column 1 does not fill the available space because of the 2 extra column definitions in grid-row-columns

webcraftsman commented 6 years ago

@jmls you need to change column 1 to grid-column: auto / span 3; when you hide column 2 and 3. Once you define the number of columns, you have to change the span to get the first column to span all 3.

https://codepen.io/webcraftsman/pen/KeMLRP

jmls commented 6 years ago

yeah - I had come to that conclusion, but was hoping there was a css-grid-only way instead of messing about with classes. However, on the bright side, my solution was the same as the experts here so feeling pretty smug ;)

Thanks so much for the help, really appreciate it.