how to create auto fit column in html where horizontal scroll bar doesn't appear irrespective of number of columns

I'm trying to create a html structure where the column container auto adjust width based on number of columns without horizontal scroll bar. I've tried various online resources but failed to create one.

Has any body created such structure where the width is automatically shrinks based on columns ? enter image description here

enter image description here

something similar to this

https://vladocar.github.io/infinity-css-grid/demo1.html

1 answer

  • answered 2019-12-07 13:49 Azafo Cossa

    You can use the css grid system to reach the desired result. Supposing you have this HTML code:

    <div id="container" class=" col">
            <div class="element one">ONE</div>
            <div class="element two">TWO</div>
            <div class="element three">THREE</div>
            <div class="element four">Four</div>
    </div>
    


    Then you can write your CSS as this:

    .element {
            padding: 1.5rem;
            border: 1px darkgray solid;
        }
    
        .one {
            background: rgb(121, 172, 74);
        }
    
        .two {
            background: rgb(71, 73, 190);
        }
    
        .three {
            background-color: rgb(148, 71, 71);
        }
    
        .four {
            background: rgb(151, 39, 142);
        }
    
        #container.col {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(45vh, 1fr));
            margin-top: 20px;
        }