How To Set Box Column Screen Size Wise

In This Topic, We are going to see that set columns screen size-wise with using CSS. The columns adjust themselves as screen size.

As in the previous article, we learn How To Set an Image In Box Without Stretch Image.

This article will explain How to Set Box Column Screen Size Wise. No need to add media queries for adjusting columns size screen-wise. Here, we use a Display Grid And Grid property for Auto-Adjust Columns.

Here, I have made columns and as content used images for the demo.
just simply put blow HTML and CSS to your file.

Here, is the HTML

1. Html file

<div class="blog-title">
    <h1> set box column screen size wise  </h1>
</div>

<div class="main-div">
    <ul class="ul-box-wrapper">  
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/S530m6Y.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/4W9UQhP.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/tM4bO0s.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/3UFgpBg.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/S530m6Y.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/4W9UQhP.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/tM4bO0s.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/3UFgpBg.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/S530m6Y.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/4W9UQhP.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/tM4bO0s.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/3UFgpBg.png">
            </div>
        </li>
        <li class="li-img-Box">
            <div class="image-box">
                <img src="https://i.imgur.com/S530m6Y.png">
            </div>
        </li>
    </ul>
</div>

Here, is CSS for columns and images

2. CSS

body{
            background-color: #000;
        }
        h1 {
            color: aliceblue;
        }
        .blog-title {
            text-align: center;
            margin-bottom: 50px;
        }
        .ul-box-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
            grid-template-rows: auto;
            align-items: start;
        }
        .li-img-Box {
            width: auto;
            max-width: inherit;
            padding: 0 12px;
            flex-direction: column;
            display: flex;
            justify-content: center;
            height: 100%;
            margin-bottom: 0;
        }
        .image-box {
            border: 1px solid #686868;
            height: 100%;
            border-radius: 10px;
            padding: 20px 15px 17px;
            margin-bottom: 49px ;
            display: flex;
            height: 250px;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        .image-box img {
            object-fit: contain;
            height: auto;
            position: absolute;
            bottom: 0px;
            width: auto;
            max-height: 100%;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

Now open your HTML in the browser. And Resize your browser you can see the auto-adjust columns without using a media query.

Please, review the below video.

Hope you guys find something useful.