Significant Spacing Among HTML Elements within a Grid Layout

I am currently in the process of designing a 3-column grid layout for one of the pages on my website. Some of the elements within this grid span across 2 columns, while others only take up 1 column. However, I am facing an issue with spacing as I want these elements to align organically and minimize any unnecessary gaps or white space. Here is a basic representation of the current state of the page:

And here is the desired outcome:

Take a look at the fiddle here for reference.

Below is the CSS code being used:

*{
    color: white;
}

.clear{
clear:both;
}

.out_wrap_blk {
    padding: 5px;
    background: black;
    float:left;
    margin: 10px;
}
.out_wrap_gry {
    padding: 5px;
    background: #323232;
    float:left;
    margin: 10px;
}
.in_wrap_grn {
    border: 1px solid #0CFF0E;
    padding: 20px;
}
.in_wrap_blk {
    border: 1px solid black;
    padding: 20px;
}
.col_1 {
    width: 298px;
}
.col_2 {
    width: 668px;
}
.col_3 {
    width: 1038px;
}

And here is the corresponding HTML markup:

<div id="page_wrap">
    <div id="page_head">
        <div class="out_wrap_blk">
            <div class="in_wrap_grn col_3">
                 <h1>Test!!!</h1>
Bacon ipsum dolor amet chicken drumstick spare ribs t-bone leberkas brisket pork chop bacon beef ribeye pastrami. Tail bresaola pork andouille cow doner. Kevin short loin turducken picanha swine. Fatback prosciutto shank filet mignon short ribs capicola biltong pork loin landjaeger sausage beef meatball.</div>
        </div>
    </div>
    <div class="out_wrap_gry">
        <div class="in_wrap_blk col_2">Andouille doner beef pancetta picanha tenderloin. Boudin picanha ham hock, ham brisket pancetta tongue beef ribs kevin swine.
            <br>Ham hock shank tongue pastrami turkey frankfurter. Strip steak pork filet mignon andouille ground round shoulder biltong jowl fatback short ribs pork belly cupim pig. Ground round venison cupim swine cow, jowl chuck tenderloin ham hock tongue jerky. Tail fatback pork loin pig. Tongue frankfurter leberkas kielbasa, hamburger strip steak bacon pork loin chuck biltong meatloaf venison picanha.</div>
    </div>
    ... (additional HTML code)
</div>

How can I achieve this layout without the extra spaces between elements?

htmlcssgridspacing

Answer №1

In most cases, I prefer to provide an explanation rather than just giving a solution. However, due to the complexity of this topic, it's more efficient to demonstrate through code. The key points are as follows: Firstly, you need to set the maximum width for the wrapper to control the layout size. Then, divide the layout into columns - two for the left and right sides, and two more for smaller columns beneath the larger box:

HTML

<div class="wrapper">
    <div class="column1">
        <div class="box large"></div>
        <div class="sub-column1">
            <div class="box small"></div>
            <div class="box large"></div>
        </div>
        <div class="sub-column2">
            <div class="box large"></div>
            <div class="box small"></div>
        </div>
    </div>
    <div class="column2">
        <div class="box small"></div>
        <div class="box large"></div>
        <div class="box large"></div>
    </div>
</div>

CSS

.wrapper{
    max-width: 500px; 
    overflow: hidden;
    margin: auto;
}

.column1{
    width: 60%;
    float: left;
    overflow: hidden;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

.column2{
    width: 40%;
    float: left;
}

.sub-column1, .sub-column2{
    width: 50%;
    float: left;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.sub-column2{
    padding: 0;
}

.box{
    width: 100%;
    background: black;
    padding: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.large{
    height: 100px;
}

.small{
    height: 15px;
}

FIDDLE

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding JSON objects to an HTML body with pure JavaScript - no need for jQuery!

I have my website content stored in a 'content.json' file, resulting in an empty body in my HTML index. Currently, I am able to console.log all the elements from 'script.js' and view all the divs declared in 'content.json' wit ...

javascripthtmljson

Is there a way to eliminate the pop-up window background in MUI?

Is there a way to get rid of the white pop-up background in MUI's default CSS? <Dialog open={open} onClose={() => { setOpen(false); }} > <DialogContent> <h1>Do you really ...

javascriptcssreactjsmaterial-ui

linking to a page that shows the user's chosen option from a dropdown menu

One of the challenges I encountered was creating a feature that allows users to share a specific selection from multiple dropdown lists on a page. Essentially, my goal was to enable users to send a link that would direct others to the same page with the ex ...

javascriptjqueryhtml

Creating a fixed navigation bar for an ecommerce website

Recently, I purchased a webshop and I am trying to implement a sticky header that remains at the top of the page all the time. Unfortunately, none of the solutions I've tried seem to be working, and I'm stuck on how to proceed. Is there anyone ou ...

javascripthtmlcss

Triggering a JavaScript function when the mouse moves off an element

Recently, I created the following code snippet for marquee effect. The main functionality it is missing is triggering a function on mouse-over. <marquee class="smooth_m" behavior="scroll" direction="left" scrollamount="3"> <span style="float:le ...

javascripthtmlmarquee

The div reveals a submenu by popping out when its overflow is set to hidden

I am trying to figure out how to create a horizontal menu with sliding option and submenu. The issue arises when I set overflow to hidden for the sliding effect, as it causes problems with the submenu. Any suggestions or ideas on how to solve this dilemma ...

javascripthtmlcssoverflow

The post button isn't appearing on my feed

I recently added a like button to my website, but when I click to publish, the post does not appear on my Wall. Can anyone help me figure out why this is happening? Here is the HTML code for my button: <div class="fb-like" data-send="false" data-layout ...

javascripthtmlfacebookfacebook-like

Stuck on changing the background color of a DIV in WooCommerce product descriptions with CSS

I seem to be stuck on a simple fix and despite searching everywhere, I can't seem to make it work. The problem lies within WooCommerce on my WordPress site, where I suspect that my CSS is conflicting with WC's and causing some color problems. Yo ...

csswordpresscolors

What is the best way to obtain the current cursor location in draft.js?

As part of my draftjs project, I'm working on implementing a feature that allows users to easily insert links. One approach I've taken is creating a popup that appears when the shortcut cmk + k is pressed. To enhance the user experience, I am cu ...

javascripthtmlreactjsnext.jsdraftjs

Guide to pre-populate a text field within a WKWebView on a website with the use of Swift

I am a beginner in the world of coding, specifically with Swift. My goal is to allow users to input their username and password in the settings section, which will then automatically populate the login page on a WKWebView that I have created. Currently, I ...

htmlswiftxcode

Utilize styling only when both classes are actively used within media queries or bootstrap

Despite specifying to apply the text-align to 'md-3' instead of 'sm', it still applies when the browser is resized to use the 'sm' style. Simply put, I only want the style to be applied if the media queries interpret my devic ...

csstwitter-bootstrapmedia-queries

Transferring css to an external file within an angular 4 component by utilizing webpack

I encountered this specific error message: Error: Anticipated 'styles' to be a collection of strings. Despite the fact that I have clearly defined the styles as an array of strings: styleUrls: ['./app.component.css'] Can anyone pinp ...

cssangularwebpack

the content outside of the division is incorrectly formatted

Here is the code snippet that I am working with: <html lang='es'> <head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.mi ...

htmlcss

Understanding how to activate a React navbar button is essential for creating a seamless user

How can I make my sidebar button change color when I navigate to the page it links to? ...

javascripthtmlsassreact-redux

Run a PHP function using <button onclick=""> tag

Is it possible to trigger the execution of a PHP script when clicking an HTML button? I am aware that simply calling a PHP function directly from the button's onclick event like this: <button onclick="myPhpFunction("testString")">Button</butt ...

javascriptphphtmlcssserver

The onchange() function appears to be undefined, could it be inaccessible from the index.html file?

I have encountered an issue while trying to assign an 'onchange' attribute to a <select> tag in my HTML. The function I defined as filterChanged() in my main.js file (which is bundled into bundle.js) cannot be accessed when the onchange eve ...

javascripthtmldomwebpackecmascript-6

Obtained a ZIP file via CodeSandbox that contains a Vue.JS webpage. However, the index.html file yielded an

I have created my first ever Vue.JS / Vue2Leaflet app. It runs perfectly fine on codesandbox.io. However, when I download the ZIP file and try to open the index.html file, it appears blank. Is there something specific that needs to be done to make it work, ...

htmlvue.jsleaflet

Consider utilizing divs in a similar manner to tables

I typically use tables to align images and text, but they don't work well on mobile devices. I'd like to switch to using CSS and DIVs instead, even though I have no experience with them. My goal is to center three pictures with text above each o ...

csshtml

Property registered in CSS dynamically

Is it possible to pass dynamic values when using the css registered property? For instance, in the code snippet below, how can I pass on the value ---numValue=35 to to{--num:}? @property --num { syntax: "<integer>"; initial-value: 0; ...

htmlcss

Any ideas on what to do now that the navbar-default has apparently been removed in Bootstrap 4 (beta 2

The navbar-default class in Bootstrap 3 had a sleek linear-gradient background and a few other appealing features. Unfortunately, it appears to have been removed in Bootstrap 4 beta 2. Before attempting to manually replicate the desired effect, I wanted ...

cssbootstrap-4