CSS Automatically Resize Grid Item

Question

I'm trying to learn CSS to some extent. I had following code where when resizing logo and table style would overflow table.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto; /* auto auto; */
                background-color: #2196f3;
                padding: 10px;
            }
            .grid-item {
                background-color: rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(0, 0, 0, 0.8);
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Grid Elements</h1>

        <p>
            A Grid Layout must have a parent element with the
            <em>display</em> property set to <em>grid</em> or
            <em>inline-grid</em>.
        </p>

        <p>
            Direct child element(s) of the grid container automatically becomes
            grid items.
        </p>

        <div class="grid-container">
            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>

            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
        </div>
    </body>
</html>

Using 3 new settings fixed that for me to some extent:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto; /* auto auto; */
                background-color: #2196f3;
                padding: 10px;
            }
            .grid-item {
                background-color: rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(0, 0, 0, 0.8);
                padding: 20px;
                font-size: 30px;
                text-align: center;

                /* Addeed */
                overflow: hidden; /* NEW */
                min-height: 0; /* NEW */
                min-width: 0; /* NEW; needed for Firefox */
            }
        </style>
    </head>
    <body>
        <h1>Grid Elements</h1>

        <p>
            A Grid Layout must have a parent element with the
            <em>display</em> property set to <em>grid</em> or
            <em>inline-grid</em>.
        </p>

        <p>
            Direct child element(s) of the grid container automatically becomes
            grid items.
        </p>

        <div class="grid-container">
            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>

            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
        </div>
    </body>
</html>

Now there's no overflow, the first image gets centered to fit, 2nd image is cut. Which is somewhat ok.

My questions:

What would be the solution to get that image to resize to fit?
Will that solution work for other types of data within that grid? I'm planning to use http://datatables.net and put tables within that grid. I want to make sure the table is readable and not overflow.
Is there a way to prevent grid item to go beyone certain size? Like if datatable is required to be certain size, and user opens it on smaller size I would prefer to get scroller bottom / top then make it broken.
There is grid-template-columns: auto; I'm adding more auto auto auto to get more columns. What would be the way so that when there is a certain size it's 3 columns, but when it goes down it becomes 2 columns and then 1 column when it's minimal. How can I achieve that in a way where it would work in a most efficient way that wouldn't require me to change things all the time.
Is there a way to stop the browser from resizing further (making it smaller)? I would like to stop the user resizing browser so that things are readable.

@TemaniAfif it's 5 questions related to each other. I've added all 5 because solution for first one may not work for the 2nd one and will be not working with the 4th or 5th one. I would then end up with 5 solutions that can't be used together. Hence why I asked all 5. — MadBoy
– MadBoy, Commented Jan 9, 2019 at 20:49

elbrant · Accepted Answer · 2019-01-10 03:49:21Z

2

You can resize your images by adding <meta name="viewport" content="width = divice-width, initial-scale = 1.0"> in the <head></head>section, along with img { max-width: 100%; height: auto; } in your CSS section.
Be careful when you create your tables that they work with the smallest format in your target view. Using a table width of "1000px" won't work, but "100%" may solve those issues.
yes, just as you have a min-width setting, you can also indicate a max-width setting.
Right now your <div>'s all stack on top of eachother. If you have 2 or 3 side by side you would wrap them in a "container" or "row" and add float: left; to the CSS for each of the columns. They should collapse under eachother depending on the size of the viewer's screen.
Change the min-height and min-width settings from "0" to the desired size(s).

whew! Was that everything?

answered Jan 10, 2019 at 3:49

elbrant

7915 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MadBoy Over a year ago

Thank you. One additional question - there is class=grid-container and I assume that that's what you mean by the container? How would the row look like because right now rows seems to be done by the container itself depending on amount of "auto" i put in grid-template-columns

elbrant Over a year ago

Right, so you have your <div class="grid-container">. If you want all of your <div>'s to be side by side, add: float: left; to the CSS for .grid-item. If you only want two or three columns, you can make a CSS class (perhaps .grid-column) and add the float: left; style there. If you want to have colums of different widths, set it with the grid-template-columns attribute, for equal widths you can leave it at auto, or use 30%, or 200px, etc.

Collectives™ on Stack Overflow

CSS Automatically Resize Grid Item

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related