Make a grid big enough for its content

Question

I have in my HTML page grids contained in grids contained in grids, all contained in kind of a mother-grid. It may be ugly but it's a structural requirement of my website.

When the window is small, the grids get smaller as well, and unreadable at one point.

I would like that, when the window gets too small, a single (horizontal) scrollbar appears in order to make the whole readable.

I've read a book about CSS and it didn't give me the answer :(

Any ideas ?

Zlotz

Maybe `@media` queries will help you https://www.w3schools.com/cssref/css3_pr_mediaquery.asp — Sa1m0n, Sep 07 '20 at 22:33
It seems that I can do things with @media, but I hoped not to have to compute the size I need to display my grids. There must be a simpler way, no ? — Zlotz, Sep 07 '20 at 22:39
@Zlotz please add your html structure ... or what have you already try ? — نور, Sep 12 '20 at 05:08
do you have a code snippet to demonstrate your issue and show us how you have set your grid layout (row/colums or area) ? auto-fill/auto-fit could be an option, minmax() or width:min-content could also be another option but also none of this could match what you have done. ... Answers from the little of your question can be guesses or opinions and maybe you'll be lucky if one of these comes to be efficient... my guess `display:inline-grid;min-width:100%;` — G-Cyrillus, Sep 12 '20 at 22:25
My HTML structure is Javascript dependent. The user provokes the creation of grids, and of grids inside grids, and so on. — Zlotz, Sep 14 '20 at 15:45
please check the answer, if it covers the solution area you were targeting to achieve @Zlotz — Ritika Gupta, Sep 18 '20 at 07:45

score 1 · Answer 1 · edited Sep 18 '20 at 07:34

Imho, best answer is Christoper's. You can take a look at CSS units here: CSS Units to choose which one fits best for you.

Best choices for your case should be vw (relative to viewport width), % (relative to parent width) or em/rem (relative to font sizes, the first for the current element and the second for the root element)

If you will try vw unit, remember to define viewport meta tag on header. In example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

score 1 · Answer 2 · answered Sep 18 '20 at 07:41

As inferred from the problem statement, please find the below code running for large-screens and small-screen breakpoints, a mother grid containing grids inside grids.... and a single scroll controlling the view of grids in clean manner on smaller screen sizes, screenshots of which have been attached in support of the same.

div{
border: 1px solid black;
padding: 12px;
margin: 0.5px;
}
div.mother-grid{
display: grid;
grid-template-columns: 350px 350px;

}
div.sub-grid{
  display: grid;
  grid-template-columns: 150px 150px;
}
div.mother-grid{
  max-width: 100%;
  overflow: auto;
}

<div class="mother-grid">
<div class="sub-grid">

<div class="sub-sub-grid">This is sub grid level 2</div>
<div class="sub-sub-grid">This is sub grid level 2</div>
</div>
<div class="sub-grid">

<div class="sub-sub-grid">This is sub grid level 2</div>
<div class="sub-sub-grid">This is sub grid level 2</div>
</div>
</div>

score 0 · Answer 3 · answered Sep 11 '20 at 22:36

0

Specify min-width for every cell (of course, depending on the the cell class) rather than for the whole page. Then effective min-width for the whole page will be internally calculated by the layout engine.

answered Sep 11 '20 at 22:36

Christopher Yeleighton

454
2
6

Thanks for your answer. I should specify min-width = what ? "initial" ? – Zlotz Sep 14 '20 at 15:41
It depends on what you to display there, initial would be 0. Minimum width means that if the cell is narrower than that, the display is unreadable. – Christopher Yeleighton Sep 14 '20 at 16:03

score 0 · Answer 4 · answered Sep 11 '20 at 23:06

The best way is using both media queries and possibly auto-fill auto-fit for responsive development.

//mobile/tablet portrait
@media only screen and (max-width: 768px) {
    .inner-grid {
         grid-template-columns: repeat(auto-fill, 186px); // you can try
     }
}
@media only screen and (max-width: 1024px) {
    .inner-grid {
     }
}

This link might be helpful CSS grid wrapping

score 0 · Answer 5 · answered Sep 15 '20 at 01:28

If you want to see the horizontal scroll bars, you need to make the grid cell scrollable in x axis, use the overflow-x property below. But if you want the children grid not to shrink, either you need to remove the grid layout, or to provide a minimum height and width to the child so that it can create scroll bars.

overflow-x : scroll;

score -1 · Answer 6 · answered Sep 07 '20 at 23:06

-1

why don't you use these in css

min-width:100px;

//or 

max-width:800px;

answered Sep 07 '20 at 23:06

Drust Taib

29
7

I may end up doing this but, depending on the situation, 100px may be not enough – Zlotz Sep 07 '20 at 23:24
If it makes me clearer, min-width is variable and I would like to avoid computing it. – Zlotz Sep 07 '20 at 23:25

Make a grid big enough for its content

6 Answers6