CODEWITHSUNDEEP
html
Uttiya Dutta
Uttiya Dutta

Reputation: 57

How to create a grid that dynamically resizes to fit user screen

I'm creating a website which will have a grid of all the users files that the user has. Similar to what google drive has (check google drive image).

How can i create this using html?

Google drive image

Upvotes: 2

Views: 69

Answers (2)

TheSnowmann
TheSnowmann

Reputation: 41

Look into the bootstrap 4 layout system found at https://getbootstrap.com/docs/4.4/layout/grid/ . Bootstrap is very good for making layouts like what you are looking for however I also recommend learning about the CSS grid system to expand your skills with CSS rather than relying on a framework like bootstrap. Here is an interesting video on youtube I like watching about the CSS grid system https://youtu.be/7kVeCqQCxlk

Upvotes: 0

krishna_tandon
krishna_tandon

Reputation: 393

CSS 

<style>
    .width-1000 {
        max-width: 1000px;
    }

    .d-flex {
        display: flex;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .card-details {
        height: 100px;
        min-width: 100px;
        max-width: 100px;
        border: 2px solid #CCC;
        margin-right: 10px;
        margin-bottom: 10px;
    }
</style>

HTML

 <div class="d-flex width-1000 flex-wrap">     
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
</div>

Now based on your requirement, you can use the bootstrap grid system. Dividing the sections in the respective width. By this, it means, if we replicate google drive image {using bootstrap-4}

<div class="col-xl-2"> 
   Sidebar
</div>

<div class="col-xl-10"> 
   Block content which is highlighted

    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
    <div class="card-details"></div>
</div>

will help you achieve the desired output.

The above code was as per the image provided where the width is in pixel. You can use % as well to change it while resizing the browser window. But in google drive, resizing the window, the height and width of the cards remain the same. So, the above example fulfills the requirement.

Also, read the following : Links to the bootstrap grid structure - Link-1 and Link-2

Upvotes: 1

Related Questions