2

I'm trying to create a 12-column grid just like Bootstrap one but with CSS3 Grid.

But I got a huge problem: If I have 8-column item and the gap is 40px, then the min width is 40 * 8 = 320px or else it will overflow.

I made an example here https://codepen.io/hrsetyono/pen/mpKxba

Is there any syntax to fix that? There's not much resource on this other than basic introduction.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
hrsetyono
  • 4,474
  • 13
  • 46
  • 80
  • Not sure what you're after. With multiple levels of grid containers and fixed grid-gaps you have the potential for overflow. – Michael Benjamin Jan 13 '18 at 13:43
  • Also, please post your code in the question itself. It will make the question self-sufficient and you'll reduce the chance of having it closed. – Michael Benjamin Jan 13 '18 at 13:45
  • @Michael_B Sorry for late reply, I have posted it as codepen. – hrsetyono Jan 17 '18 at 07:53
  • @Michael_B I'm trying to convert my Float column to CSS3 Grid. If I set a column to `9fr` out of 12, I want it to span 75% no matter the screen size. – hrsetyono Jan 17 '18 at 07:58
  • Posted some duplicates that may shed some light. If not, let me know and I'll re-open the question. – Michael Benjamin Jan 17 '18 at 18:24
  • 1
    The suggested duplications are not dealing exactly with that problem. I also have the problem with grid-gap, that it takes eg. 20px gap * 24 columns = 480px width. Even though I make two columns with a span 10 and 14. The gap applies to EACH column. – Stefan Dec 02 '20 at 11:52
  • I really agree with @Stefan 's comment. Did you find any solution to this issue? – nomadoda Jul 26 '21 at 10:28
  • I suppose that it makes sense that the absolute minimum width of a 12-column grid must be its gap * 11 (in this case `40px * 11 = 440px`), else I'm not sure how we would expect the grid to behave given 12 columns with an item in each. The only workaround I can come up with is to use the lowest number of columns possible. So instead of using a 12-column layout with items spanning 8 and 4 columns respectively – use a 3 column layout with items spanning 2 and 1 columns instead. I admit, also coming from bootstrap, this might not be the workaround one was hoping for. – nomadoda Jul 26 '21 at 10:46
  • Could you please consider reopening this issue? @MichaelBenjamin – nomadoda Jul 26 '21 at 11:06

0 Answers0