CSS Automatically Resize Grid Item

user_218540 0
Viewed 2606

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:

  1. What would be the solution to get that image to resize to fit?
  2. 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.

  3. 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.

  4. 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.

  5. 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.
css html
1 Answers
  1. 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.
  2. 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.
  3. yes, just as you have a min-width setting, you can also indicate a max-width setting.
  4. 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.
  5. Change the min-height and min-width settings from "0" to the desired size(s).

whew! Was that everything?

user_105015020
Related