How to handle the size of the grid layout

HTML & CSS
1

I have the following JSFiddle where there is a grid layout and when you hit Map Options on the Grid button, it puts the content of blue square in those squares. I want to reduce the size of the all the squares since the text content is not big. I am looking to reduce it to something of this size as shown in the Jsfiddle

image
image1688×853 76.2 KB

Such that user won’t have to scroll all the way down to view everything. On a big 27 inch monitor, I can only see the square until Row C as shown below:

image
image1899×913 31.9 KB

I was looking at this part of the CSS:

.grid {
            margin: auto;
            display: grid;
            flex: 1 0 0;
            grid-template-columns: repeat(12, 1fr);
            padding-top: 1.5rem;
            
        }

Do I need to get rid of repeat from grid-template-columns: repeat(12, 1fr); and write it in different way?

2

Does the aspect ratio of the grid items need to be 1/1 ?

3

Keeping it 1:1 would display it as square if I’m understanding it correctly and hence I would like to display it as square after the size is reduced.

4

1fr will make the squares all 1 Fraction of the whole - so if you want the squares smaller make the whole smaller.

1 Like
5

Wouldn’t just setting a max-width on the grid do what you want?

      .grid {
            max-width:800px;
        }

Or did I miss the point again :slight_smile:

2 Likes
6

Thanks, Paul for chiming in. Yes, I think that will do. Looks like I might have to keep the max-width to 1200 or 1400px. Otherwise, the text is getting difficult to read. That might mean that some scrolling can’t be avoided for the user.

7

The content of the blue “options” is not square so I do not understand why you want the grid elements below to be square.

Deleting aspect ratio: 1/1 would reduce the height of the grid items so scrolling would be reduced.

You could also sqeeze everything up by reducing margins and padding everywhere. For example you have big 2rem top and bottom margins on your “phrase” <div>. You have large default margins on your <h1> and <h2> elements. You have 1rem padding on all four sides of your grid elements. If you really want to reduce scrolling, make all margins and padding throughout just 2px and go from there.

1 Like
8

I can understand. However, the grid elements need to be square.

1 Like
9

I just had a discussion about this with my team and it looks like it’s okay if I don’t have squares and they kind of look like rectangles.

Were you referring to a specific part of code when you mentioned about deleting aspect ratio:1/1?

10

It’s on line 37 of your JSFiddle’s CSS.

Of course you could keep the aspect ratio declaration but change its value. The value does not need to appear as a fraction: it can be just a number with or without decimal part.

At present the height of your grid items is controlled by the aspect ratio. If you delete the aspect ratio declaration the height will become 2rem due to the 1rem padding on line 82. When you then drag text from a blue rectangle into a grid item, the height increases by the rendered height of the text which is 18 pixels (on my browser). This increases the height of all grid items in the row. I therefore suggest you replace aspect-ratio: 1/1; with min-height: 50px; (or larger value) so there is no change in height when text is dragged in. However I am not too happy that the 50px is a “magic number”. Using min-height: 3.2rem; would be better.

Are you assuming all users of your web page will have a large screen?

1 Like
11

Not really sure. But not all are going to use 27 inch monitor just like I’m using as a developer. Laptops, small screens or tablets might be used.

12

I think there may be too much on your web page to be able to get this to work satisfactorily on tablets: with users able to drag with a finger from top of options to bottom of grid.

I note also that text in the options is contenteditable so users can lengthen the text (currently you have to use left and right arrow keys to place caret in the text).

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.