How to create a full-screen 2x2 grid layout using divs in HTML

Question

How to create a full-screen 2x2 grid layout using divs in HTML

I am attempting to create a grid layout of 4 divs arranged in a 2x2 configuration. I would like to have a 1 pixel border between these divs, similar to the following structure:

1|2
-+-
3|4

Each div should have equal size and collectively fill the entire screen regardless of resolution. Initially, I tried to create 2 rows with 2 column divs each, using the floating left property. While the rows work perfectly, adding the border between the divs causes a scroll bar to appear. It seems like the border is not being included in the 50% width. How can I resolve this issue?

Here is the code I have been working on:

CSS

 html, body 
            {
                margin: 0;
                padding: 0;
                width: 100%;
                min-height: 100%;
            }

            .row
            {
                Width: 100%;
                Height: 50%;
             }

            .border
            {
                border-bottom: 1px solid black;
            }

HTML

<div class="row border" style="background-color: red;">

    </div>
    <div class="row" style="background-color: blue">

    </div>

I also attempted to create a demo of the code in a fiddle: DEMO but the height: 100% on body and/or html does not seem to work as expected.

css html

Answer 1

Answer №1

Would you like something similar to this design? I created it completely from scratch...

View Demo

My approach involves positioning 4 div elements side by side, each occupying 50% of the width. I utilized the box-sizing property to ensure that borders do not affect the alignment of the div elements. These div elements are both 50% wide and 50% high.

<div></div>
<div></div>
<div></div>
<div></div>

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}

div {
    width: 50%;
    height: 50%;
    float: left;
}

div:nth-of-type(1) {
    background: #ccc;
}

div:nth-of-type(2) {
    background: #bbb;
    border-left: 1px solid #f00;
}

div:nth-of-type(3) {
    background: #aaa;
    border-top: 1px solid #f00;
}

div:nth-of-type(4) {
    background: #ddd;
    border-top: 1px solid #f00;
    border-left: 1px solid #f00;
}

Answer 2

Would you like something similar to this design? I created it completely from scratch...

View Demo

My approach involves positioning 4 div elements side by side, each occupying 50% of the width. I utilized the box-sizing property to ensure that borders do not affect the alignment of the div elements. These div elements are both 50% wide and 50% high.

<div></div>
<div></div>
<div></div>
<div></div>

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}

div {
    width: 50%;
    height: 50%;
    float: left;
}

div:nth-of-type(1) {
    background: #ccc;
}

div:nth-of-type(2) {
    background: #bbb;
    border-left: 1px solid #f00;
}

div:nth-of-type(3) {
    background: #aaa;
    border-top: 1px solid #f00;
}

div:nth-of-type(4) {
    background: #ddd;
    border-top: 1px solid #f00;
    border-left: 1px solid #f00;
}

Answer 3

Answer №2

Have you heard of the useful CSS property called box-sizing? By setting it to border-box, you can ensure that the widths of borders and padding are included in the width of an element. This means you can freely add padding to your div elements without worrying about them becoming too wide.

Interestingly, you don't necessarily need to enclose your rows in separate div elements. Simply specify that a div should be 50% wide and float them left, allowing two to neatly fit side by side.

Here's an example of how you can achieve this:

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

Additionally, by using CSS, you can create a border layout for your boxes. You can experiment with styling the first and second child boxes to create a visually appealing layout.

If you're looking for a more flexible approach, consider using a background color for the body element to simulate borders between the boxes. With a bit of CSS magic, you can adjust the number of boxes in your grid without hassle. Check out this example to see it in action.

Answer 4

Have you heard of the useful CSS property called box-sizing? By setting it to border-box, you can ensure that the widths of borders and padding are included in the width of an element. This means you can freely add padding to your div elements without worrying about them becoming too wide.

Interestingly, you don't necessarily need to enclose your rows in separate div elements. Simply specify that a div should be 50% wide and float them left, allowing two to neatly fit side by side.

Here's an example of how you can achieve this:

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

Additionally, by using CSS, you can create a border layout for your boxes. You can experiment with styling the first and second child boxes to create a visually appealing layout.

If you're looking for a more flexible approach, consider using a background color for the body element to simulate borders between the boxes. With a bit of CSS magic, you can adjust the number of boxes in your grid without hassle. Check out this example to see it in action.

Answer 5

Answer №3

Take a look at this demonstration:

height is utilized in place of min-height

http://jsfiddle.net/N6JuV/7/

It creates a 2X2 grid as per your requirement.

Ensure that the sum of your width % and margin % equals 100%. You can also use decimals for smaller margins.

For example, check out http://jsfiddle.net/N6JuV/8/

Answer 6

Take a look at this demonstration:

height is utilized in place of min-height

http://jsfiddle.net/N6JuV/7/

It creates a 2X2 grid as per your requirement.

Ensure that the sum of your width % and margin % equals 100%. You can also use decimals for smaller margins.

For example, check out http://jsfiddle.net/N6JuV/8/

Answer 7

Answer №4

Check out my solution below:

<div class="grid-container">
   <div class="grid-row">
       <div class="grid-cell first"></div>
       <div class="grid-cell first"></div>
   </div>
   <div class="grid-row">
       <div class="grid-cell first"></div>
       <div class="grid-cell first"></div>
   </div>
</div>

Here is the CSS code:

.grid-container{
   display:table;
   table-layout:fixed;
   height:100%;
   width:100%; // Assuming body and html are set to 100% height and width
}
.grid-row{
   display:table-row;
}
.grid-cell{
   display:table-cell;
}
.first{
   width:50%;
}
.second{
   width:50%;
}

View the demo http://jsbin.com/otufir/2/edit

Answer 8

Check out my solution below:

<div class="grid-container">
   <div class="grid-row">
       <div class="grid-cell first"></div>
       <div class="grid-cell first"></div>
   </div>
   <div class="grid-row">
       <div class="grid-cell first"></div>
       <div class="grid-cell first"></div>
   </div>
</div>

Here is the CSS code:

.grid-container{
   display:table;
   table-layout:fixed;
   height:100%;
   width:100%; // Assuming body and html are set to 100% height and width
}
.grid-row{
   display:table-row;
}
.grid-cell{
   display:table-cell;
}
.first{
   width:50%;
}
.second{
   width:50%;
}

View the demo http://jsbin.com/otufir/2/edit

How to create a full-screen 2x2 grid layout using divs in HTML

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)

Is there a way to resolve issues with window.open() on Heroku platform?

Delete the "img" and "a" elements from the content within the specified node

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

The error message states: "change is not defined"

What is the term for the visual display of a product through a photo gallery or slideshow?

instructions on how to eliminate slideUp using jquery

Troubleshooting: Unable to preview Facebook Page plugin

What is the best way to determine which id has been clicked using jQuery?

Customizing the appearance and dimensions of JWPlayer Audio Player with percentage-based styling

The background image fails to load in ReactJS application

Tips for shifting objects from a horizontal row to a designated vertical column when switching to a smaller display

How can I retrieve the $index value of an ng-repeat element within a uib-dropdown?

Discovering a deeply nested div or class using Beautiful Soup

How come my picture is clinging to the bottom of the container?

Display the input in the text box before making a selection from the dropdown menu

What is the technique for creating multiple circles using CSS?

Using JavaScript to manipulate HTML content that has been dynamically injected using AJAX

Managing post and session data during PHP form submission

Bootstrap grid: Preventing horizontal scrolling when all columns cannot fit in a single row