2

I want to create an automatic grid without specifying exactly how many rows and cols.

Then each grid cell would be wide enough to fit the content (automatically). Then if the grid is not wide enough to fit 3 cols, then if would have 2 cols, if not enough for 2 cols, then it would have 1 col, etc, etc. Then if not wide enough for 1 col, that 1 col would be limited to 100% width (no horizontal scrolling).

I think you can do this with flex box, where flex-item would be limited to 100% max-width, and flex-wrap would be enabled, so it fits everything in 1 line if wide enough, but would wrap to next line if not wide enough, until there is only 1 flex-item, and that item would be limited to 100% width. But then what's the point of css grid layout?

I'm trying with grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); but you end up with horizontal scroll if width is less than 18em. If you lower it to say, 1cm, then you always get 1cm tiny cols, and content overflow the grid cell.

I'm just learning grid layout, so I hope someone can help me.

update: code:

.wpr{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
  grid-gap: 1em;
}
.wpr > div{
  background-color: red;
}
img{
  width: 100%;
  display: inline-block;
  padding-bottom: 100%;
  background-color: blue;
}
.wpr > div:nth-child(1){
  grid-row: auto / span 5;
}
<div class="wpr">
  <div>
    A<br/>
    Author<br/>
    <img/>
  </div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
</div>

update: illustration: Good layout

Sitll good

Bad Grid

Ideally: Ideally

BigName
  • 1,018
  • 2
  • 14
  • 29
  • Grid items, by default, cannot shrink below the size of their content. This can result in scrollbars being rendered. But you can override this setting: http://stackoverflow.com/q/43311943/3597276 – Michael Benjamin May 01 '17 at 12:04
  • It actually wraps all the words in my grid items, resulting in super tiny cols. So to avoid that, I added min size in `minmax(24em, 1fr)`, and this causes overflow. Setting `min-width: 0` and `overflow: auto` doesn't override that. Anyway, I have decide to go with a fixed number 12 col grid. I don't think I can figure this one out... at the moment. – BigName May 01 '17 at 22:08

1 Answers1

-3

I would recommend not using flex boxes, though lately more and more people are using them, I would just make divs that align next to one another, that way you can create a CSS box that has the desired width: say 100% or 50%, or even set it simply to "auto." Then use display: inline-block; and float: left; on the boxes; this way you can have a nice layout, and it will be responsive.

Example:

    .box1 {
        width: 49%;
        height: auto;
        float: left;
        overflow: hidden;
        margin: auto;
    display: inline-block;
    }

.box2 {
    width: 49%;
    height: autox;
    float: left;
    overflow: hidden;
    margin: auto;
display: inline-block;

}
alex1983
  • 29
  • 1
  • 10
  • why not use flex box? – BigName Apr 30 '17 at 21:41
  • I tried inline-block with float, it's pretty good. But how do you make them grow if there is empty space? – BigName May 01 '17 at 01:20
  • Flex boxes are responsive, but don't always change the way you explained you desire. Create a container that's 100%, then make the boxes a percentage, like if you want 4 boxes each box be 20%. Does that make sense? – alex1983 May 01 '17 at 03:20
  • kind of, yes. But then if on small screens, I would want to have 2 or even 1 box, then I have to use media query to set all boxes to 100%. Then it wouldn't be so different than using grid layout... – BigName May 01 '17 at 03:29
  • no it wouldn't be so different, but i think you would achieve your goal that way, use media quaries and you 2 or 1 depending on breakpoint – alex1983 May 01 '17 at 04:36