CODEWITHSUNDEEP
htmlcss
jdb2
jdb2

Reputation: 121

How to construct a responsive grid of DIVs that all have the same width

I'm coding some HTML and CSS that needs to organize a number of blocks of nested DIVs into a responsive grid which keeps each block of nested DIVs' width the same. I've tried just about everything but nothing has worked so far. As it is now, each block of nested DIVs stacks on top of the next one vertically. I'd like the blocks of nested DIVs to be responsive, in that they wrap if the browser window is resized. Also, I need each DIV to be the same width. My code may be ugly and lacking in style but it's what I had to write to get the current layout working.

I've tried using the flex and flex-wrap properties to create a grid, but it has not worked and it only horribly screws up the display of the nested DIV blocks.

<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
    width: 100%;
    height: auto;
    border: 15px solid Green;
    box-sizing: border-box;
    background-color: Aquamarine;
    margin: auto;
    text-align: center;
}

.list_1 {
    width: 30%;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
    background-color: Grey;
    display: inline-block;
}

.list_subtext {
    text-align: left;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
    font-size: 10px;
}

hr {
    color: solid black;
    width: 75%;
    text-align: center;
}

.list_2 {
    width: 85%;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
    background-color: White;
    display: inline-block;
}

.div_list_1 {
    display: list-item;
    list-style-type: disc;
    list-style-position: outside;
    text-align: left;
}
</style>
<title>Test</title>
</head>
<body>
<div class="border_box_main">

<hr><br>

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">
                    Test 1 2 3 4.
                    <div class="list_subtext">(Test2)</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">
                Test 1 2 3 4.
                <div class="list_subtext">(Test2)</div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr><br>

</div>
</body>
</html>

I get a vertical list of nested DIV blocks, with the same width. The problem is that I want the list of nested DIV blocks to flow horizontally, with each one having the same width and its position on the screen being centered. The list should also be responsive to changes in the browser window size.

EDIT : The JSFiddle link is here https://jsfiddle.net/g42nxk0p/ . AS you might have noticed, when the output window is small, my HTML doesn't render correctly. Specifically, the borders do not shrink in response to the window width. I'd also like to fix this.

Upvotes: 0

Views: 64

Answers (2)

jdb2
jdb2

Reputation: 121

Well, I finally got it working, at least on Desktop devices :) Thanks to Khoi Le for the suggestions for the grid layout code. I had to tweak his and my code, but I finally got it working. I still have to add the mobile-friendly code, and hopefully that won't break the layout. The only problem, and what seems to be necessary, although it's a kludge, was that I had to add a static pixel width to the DIVs. Here is an example of the working code :

<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
    width: 100%;
    height: auto;
    border: 15px solid Green;
    box-sizing: border-box;
    background-color: Aquamarine;
    margin: auto;
    text-align: center;
    overflow: hidden;
    word-wrap: break-word;
}

.list_1 {
    width: 320px;
    padding: 15px;
    display: inline-block;
    overflow: hidden;
    word-wrap: break-word;
}

.list_subtext {
    text-align: left;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
    font-size: 10px;
    overflow: hidden;
    word-wrap: break-word;
}

hr {
    color: solid black;
    width: 75%;
    text-align: center;
}

.list_2 {
    margin: 5px;
    padding: 15px;
    background-color: White;
    display: inline-block;
    border: 20px solid grey;
    width: 200px;
    overflow: hidden;
    word-wrap: break-word;
}

.div_list_1 {
    display: list-item;
    list-style-type: disc;
    list-style-position: outside;
    text-align: left;
    overflow: hidden;
    word-wrap: break-word;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 100%;
    justify-content: center;
    overflow: hidden;
    word-wrap: break-word;
}

.item {
    width: 350px;
    margin: 20px;
    padding: 5px;
    min-height: 100px;    
    text-align: center;
    overflow: auto;
    word-wrap: normal;
}
</style>
<title>Test...</title>
</head>
<body>
<div class="border_box_main">
<br><br>
<hr>
<br>

<div class="container">
<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra iaculis pretium. Nullam risus dui, placerat et fermentum sed, efficitur non massa. Nulla congue facilisis ipsum at tincidunt. Aenean ut orci efficitur, consequat enim vitae, facilisis ex. Pellentesque imperdiet, arcu eget feugiat ultricies, neque magna hendrerit tortor, ut feugiat risus velit non eros. Aenean scelerisque pulvinar ante, vel porttitor ipsum blandit et. Aliquam eu metus eu felis blandit porta. Quisque ac neque sapien. Duis blandit nisl vitae dui bibendum congue sed sed dolor. Suspendisse vitae arcu placerat, placerat justo non, ornare ex. Phasellus suscipit ultrices ex, sed mollis eros viverra nec. Integer non aliquet augue, vitae condimentum diam. Phasellus ultrices, arcu id malesuada tincidunt, ligula elit tempus felis, quis tincidunt leo nisl sit amet velit. Sed sit amet efficitur turpis, id scelerisque nulla. 
                    <div class="list_subtext">Test1</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">In sit amet odio velit. Cras fermentum est id dapibus accumsan. Pellentesque metus lacus, gravida id justo sit amet, sodales hendrerit neque. Nulla ac orci ac neque placerat commodo. Quisque tortor risus, sagittis vitae risus a, lobortis lobortis eros. Nulla facilisi. Suspendisse luctus leo vel felis cursus, quis aliquet diam aliquet. Maecenas vitae augue placerat, posuere ex ac, venenatis nisi. Nunc mi diam, gravida eu erat nec, porta scelerisque nulla. Proin hendrerit nulla massa, non elementum lectus rhoncus quis. In dapibus vel nunc vel porta. Sed maximus purus vel enim egestas accumsan. Sed sollicitudin libero ac quam iaculis tempus. <div class="list_subtext">Test2</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">Morbi at gravida urna. Morbi imperdiet nisl vel felis interdum, a volutpat turpis eleifend. Sed ultrices sollicitudin elit, sit amet tincidunt velit pharetra ut. Integer tincidunt metus at purus vestibulum, ut viverra orci volutpat. Donec hendrerit quam eu mauris molestie, sed congue orci vehicula. In ac justo tincidunt, suscipit ipsum in, mattis mauris. Duis lobortis lectus at nunc faucibus consectetur. <div class="list_subtext">Test3</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">Cras sit amet sapien mi. Fusce at convallis metus. Quisque ac imperdiet ex. Morbi dictum, felis sit amet placerat malesuada, lectus arcu interdum ipsum, ac egestas nisi leo eget dui. Maecenas id ex rutrum, condimentum quam et, suscipit justo. Nam et pellentesque arcu, vel porttitor sapien. Integer egestas enim quam, vehicula tristique tellus sodales ut. 
                <div class="list_subtext">Test4</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">Proin sapien urna, cursus eu eros ac, iaculis sollicitudin massa. Vestibulum et sodales felis. Nulla vel cursus lorem. Sed dui libero, cursus sed est in, venenatis volutpat ex. Pellentesque tincidunt risus ut lorem euismod, sit amet facilisis lectus fermentum. Nunc tellus sapien, interdum eu urna id, viverra ultricies massa. Pellentesque elementum nisl leo, ullamcorper elementum metus mattis vel. Cras sodales facilisis eros, a tincidunt nisl vulputate in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut justo euismod, dictum libero in, finibus arcu. <div class="list_subtext">Test5</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1"> Proin et leo ultricies, elementum odio a, iaculis sem. Nam nec lacus facilisis metus elementum sodales. Aenean convallis luctus nibh, a luctus tortor. Sed dictum lorem et nulla fermentum, ac consequat justo sagittis. Nullam rhoncus ornare massa eget auctor. Praesent at convallis diam. Aliquam viverra mollis neque, ac porta ligula fringilla ac. Praesent neque nisl, cursus vitae sagittis ut, tristique eget justo. In semper urna nec justo egestas vestibulum.


                <div class="list_subtext">Test6</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">Donec et cursus nisl, sed dictum justo. Cras pretium lorem in dui sollicitudin ullamcorper. Nullam et dolor id velit imperdiet consequat. Aenean turpis ex, convallis bibendum elit vitae, fermentum molestie erat. Donec fringilla pulvinar metus, eu varius metus condimentum vel. Suspendisse potenti. Aliquam rutrum euismod dolor, quis eleifend dui faucibus id. Ut vitae leo vel quam tempor dapibus sit amet at ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis pharetra leo, vel rutrum diam. Aliquam dapibus tellus sit amet tellus imperdiet, et tincidunt metus ornare. Sed sit amet urna ex. Praesent accumsan ut odio sit amet aliquet. Nunc non varius diam, sed faucibus dolor. Cras ut nunc et purus iaculis luctus nec et quam. 
                <div class="list_subtext">Test7</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">Maecenas eget tellus mollis, efficitur est a, scelerisque sem. Sed efficitur leo lectus, et fringilla ipsum pellentesque eget. Phasellus vitae egestas magna, sed lobortis erat. Aliquam eget imperdiet ligula, ac dapibus mauris. Sed lobortis bibendum felis, quis varius purus varius sagittis. Vestibulum suscipit dapibus leo non consequat. Phasellus tempor, eros vitae tempor hendrerit, dolor nibh semper metus, a hendrerit turpis leo in est. Donec faucibus iaculis mollis. Suspendisse laoreet a risus a maximus. Ut massa lacus, hendrerit eget eros et, ultrices porttitor libero. Nunc ac laoreet odio. Proin viverra molestie ipsum et faucibus. 
                <div class="list_subtext">Test8</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="item">

<div style="text-align: center;">
    <div class="list_1">
        <div style="text-align: center;">
            <div class="list_2">
                <div class="div_list_1">Praesent vitae dolor lacus. Aenean gravida, erat sed ornare laoreet, leo dolor viverra tellus, venenatis mollis nibh dolor id nisi. Morbi ac tempus elit. Maecenas maximus felis ac felis laoreet, id congue urna sollicitudin. Nulla rhoncus feugiat magna, a auctor sapien pharetra nec. Nunc egestas ipsum mi, non volutpat mi dictum non. Ut molestie augue a ex malesuada pretium. In vestibulum efficitur mi. Integer aliquet placerat tempor. Nunc ultricies ipsum vel dictum eleifend. Integer ut dapibus enim, nec porttitor magna. Nulla quis sodales lacus. 
                <div class="list_subtext">Test9</div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>


</div>
<hr><br>

</div>
</body>
</html>

The JSFiddle is here : https://jsfiddle.net/jdbtwo/ch3tfu2q/

Notice how the tops of the DIVs are all aligned. Also, the grid is repsonsive and responds to browser window size changes properly.

jdb2

EDIT : To get my code working on mobile devices, I had to pair every "width: x;" with a "min-width: x;" . Still, in the browsers on my iPhone, the listing is shifted to the left. I don't know what's causing this.

Upvotes: 1

Khoi Le
Khoi Le

Reputation: 11

Do you try to use Grid layout? I use often grid layout for the main layout and flexbox for items that are in the grid. (CSS Grid Layout Module - A Complete Guide to Grid)

Upvotes: 1

Related Questions