Create a separation between the two divs in order to prevent them from merging together in space

I am looking to design a website with grid layouts. I started by downloading a template and making some edits to it. Initially, there were only 6 grid boxes, but I added 3 more. However, when I run the code, my additional grids are merging with the first 3 grids. Below is the HTML code I used for creating the grid:

.heading h3 {
    font-size: 45px;
text-align:center;
    text-transform: uppercase;
    color: #000;
}
...
grid1 i.fa {
    font-size: 40px;
    color: #146eb4;
}
<!-- Grid Structure -->

Upon running this code, I noticed that the bottom and top grids appear fine, but the middle one is joining with the first grid. How can I prevent this from happening? Is there a way to add spacing between the grids?

javascripthtmlcss

Answer №1

With only 12 spaces available in a single row for grids placement, your design templates usually utilize all 12 grids by dividing them into 3 equal parts.

<div  class="row">
4     4      4
</div>

To accommodate the new three divs, simply nest them within a new div with the class "services-bottom-grids."

.services-top-grids { margin-bottom: 30px; }

This particular class provides an additional space of 30 pixels at the bottom.

Answer №2

To simplify the layout, consider adding a "row" class for every set of 12 columns in use. This will help maintain structure and alignment within your design (More information):

<div class="services">
  <div class="container">
        <h3 class="heading-agileinfo" style="color:#e50000"><span>grid</span></h3>

        <div class="services-top-grids row">
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
                <div class="col-md-4">
                <div class="grid1">
                      <!-- omitted -->
                </div>
            </div>
                <div class="col-md-4">
                <div class="grid1">
                       <!-- omitted -->
                </div>
            </div>
        </div>
        <div class="services-top-grids row">
                <div class="col-md-4">
                    <div class="grid1">
                         <!-- omitted -->
                    </div>
                </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="services-bottom-grids row">
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>


</div>

JSFiddle showcasing the code: https://jsfiddle.net/e3Les12m/

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

Looking for a creative way to make text reveal a background without using the standard clipping technique?

Take a look at the image attached to see the effect I am aiming for. Essentially, I am trying to make the background image show through the text, except where the text extends beyond the faded panel. In those areas, I need the text to blend in with the pa ...

htmlcssclipping

Incorporating a hyperlink within a list item for an image

Currently, I am attempting to create a clickable image within an unordered list. Although the paragraph is clickable, unfortunately, the image itself is not responding as expected. <ul> <a href="/movies/test/"><li> ...

htmlcss

Basic media query does not affect div resizing or font changes in Chrome or Internet Explorer

I am facing an issue with a simple media query that is not working as expected in Chrome or IE, but strangely it works fine in FF. I have tried various formulations of the media query without success. Any assistance would be greatly appreciated. Below is ...

htmlcss

Invoking a function from a parent controller using an Angular directive

I'm trying to make my directive call the parent's controller function. Here is an example of my directive: HTML: <div ng-app="myapp" ng-controller="mainController as mainCtrl"> some body text<br> <a href="javascript:;" ng-cli ...

javascriptangularjsangularjs-directive

Ways to implement the tabIndex attribute in JSX

As per the guidelines provided in the react documentation, this code snippet is expected to function properly. <div tabIndex="0"></div> However, upon testing it myself, I encountered an issue where the input was not working as intended and ...

javascripthtmlreactjsjsxtabindex

Unable to comprehend the process of obtaining a specific value from an array through a recursive function call

My apologies for the confusing question, but let's delve into it: function sum(arr, n) { // Only change code below this line if (n <= 0) { return 0; } else { return sum(arr, n - 1) + arr[n - 1]; } // Only change code above this line } var ...

javascriptrecursion

Transferring the selected option from a drop-down menu to a PHP page using an HTML form

I'm currently working on developing an HTML form that will send the user's question and the selected topic to a PHP page. The topics are retrieved from a MySQL database using PHP. My goal is to submit the chosen topic value from a dropdown menu, ...

phphtmlmysqlforms

Hovering over triggers tooltip flickering with Mouseover/Mouseenter interaction

When the mouseover event is triggered on the parent element, there seems to be a flickering issue when moving into the tooltip (child) element. The console log indicates that the mouseover/mouseenter event is being fired rapidly. The tooltip does not stay ...

javascriptangularjstwitter-bootstrap

Loading Angular's UI-Router view twice

My Angular application is using Angular UI-Router for routing. Here is the configuration I have set up: var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { $urlR ...

javascriptangularjsangular-ui-routerurl-routing

Router DOM in conjunction with Next.js

I am attempting to extract the output of the code in navigation, but unfortunately it is generating a dreadful error: Unhandled Runtime Error Error: You cannot render a <Router> inside another <Router>. You should never have more than one in ...

javascriptreactjsnext.jsreact-router-dom

Troubleshooting EasyZoom: Problems stemming from CSS and markup structure

Despite following the documentation correctly, I seem to be encountering an issue. There are no JavaScript errors and the DOM changes reflect my interactions. However, when I hover over the thumbnail, the larger image remains fixed at 0, 0. Removing the ea ...

javascriptcsseasyslider

Guide to making a simple bookmarklet that replicates the functionality of Selenium

I have experience with Selenium, Java/Python, XPaths and I am in search of a simple Javascript bookmarklet that acts as a basic framework for performing similar operations as Selenium on the current webpage. For example, (in pseudocode), begin document.cli ...

javascriptseleniumbookmarklet

Switching page upon submission while utilizing iFrames

I am facing a challenge on my website with an iFrame element that contains a form. After users answer some questions and submit the form, I want the page to automatically redirect to a thank you page. Unfortunately, I'm having trouble making this work ...

htmlcssvue.jsiframenuxt.js

The selection form does not display a preview of the options

I recently discovered that the CSS I added is causing the preview of select options in my form to disappear. Despite searching online, I have been unable to find a solution to this issue. Here is the problematic CSS code: .form-control{ height: 50px; ...

htmlcssdjangocss-selectors

How to Disable Functionality Using a Different Function in Vanilla JavaScript

Is there a way to disable one function with another in JavaScript? I have a form that shows additional coursework inputs only if the user has completed extra work, but I want to add a failsafe in case they change their mind. I need assistance in writing a ...

javascripthtmlcss

Using AJAX to add an event listener and passing parameters to a separate function

Short and sweet - I've got a loop that creates a series of dynamic buttons, and when one of them is clicked, I need to pass its id attribute to another file to generate a new page on the fly. Here's the code snippet: for (var i in data.contacts ...

javascriptajaxparameter-passingaddeventlistener

How to use TypeScript to filter an array based on the values of another array

Suppose I have two arrays. The first one looks like this: names: [{ value: 'recordedData', desc: 'Data' } { value: 'recordedNumbers', desc: 'numbers' } { value: 'recordedNames', desc: 'name ...

javascriptarraystypescriptobject

Using CSS to ensure that the cards have consistent heights when using both React and Bootstrap

I am currently working with Bootstrap 4 in React. I have encountered an issue where the card for Item 1 is shorter than that of Item 2, and I would like both cards to have the same height. Additionally, I anticipate adding more cards at the bottom in the ...

cssreactjsbootstrap-4

What is the best way to utilize the "useRouter" function to extract parameters from the URL within the getServerSideProps() method in Next.js?

How can I access the URL parameters within the getServerSideProps() method? Below is the snippet of my code. The objective of my code is to extract parameters from the URL, fetch data from the API, and render it on the front end. import { useRouter } from ...

javascriptnode.jsmongodbnext.js

What is the method for adjusting the dimensions of a background image (height and width)?

Just beginning to dip my toes into the world of JavaScript. This is where I'm at with my code: $("#Stage").css( "background-image", "url(BG.jpg)", "background-attachment", "fixed" ); I'm aiming to adjust the background image dimensio ...

javascriptjquerycsssizewidth