Creating a CSS Grid with Full-Width Columns and Consistent Margins

Currently, I am attempting to create a responsive grid with 4 columns that expands to the entire width of the screen on desktop displays. However, when I introduce margins to space them out evenly, I encounter an issue where the last column either doesn't fill the remaining space or drops down to a new row due to the column widths.

CSS:

#servicesGrid
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.service
{
width:24.75%;
height:45%;
background:#262626;
display:block;
float:left;
margin:1px;
}

#servicesGrid .service:nth-of-type(1)
{
width:100%;
}

#servicesGrid .service:nth-of-type(2)
{
margin-left:0;
}

#servicesGrid .service:nth-of-type(5)
{
margin-right:0;
}

HTML:

<div id="servicesGrid">

    <div class="service"></div>

    <div class="service"></div>

    <div class="service"></div>

    <div class="service"></div>

    <div class="service"></div>

</div>

Check out the example on JSFiddle: https://jsfiddle.net/4bw4p3LL/.

htmlcssgrid

Answer №1

When utilizing % for the width, it is recommended to also use % for margins. This ensures that you reach a total of 100%.

The concept here is that 4*colwidth + 3*margins = 100%

Therefore, by applying a margin-right:0.5% to all .col elements except the last one ( nth-of-type(5) ) , you will achieve a width of 

100% - 3*0.5% = 98.5% / 4 = 24.625%

where: 100% represents the width of the servicesGrid, 3 is the number of 0.5% margins given to the initial 3 columns, 98.5% denotes the remaining space occupied by the 4 columns, and dividing it by the number of columns provides the width of each column.

#servicesGrid
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.service
{
width:24.625%;
height:45%;
background:#262626;
display:block;
float:left;
margin:1px 0.5% 1px 0;
}

#servicesGrid .service:nth-of-type(5)
{
margin-right:0;
}
<div id="servicesGrid">

<div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0">
</div>

<div class="service col"></div>

<div class="service col"></div>

<div class="service col"></div>

<div class="service col"></div>

</div>

Answer №2

Utilizing the calc function for setting the width can be quite handy. This method allows you to subtract a specific value (such as margin) from the overall width. It's important to note the browser support, which is generally favorable across modern browsers.

Check out this example on jsfiddle

.service {    
    width: calc(24.75% - 1px);
    height: 45%;
    background: #262626;
    display: block;
    float: left;
    margin: 1px;
}

Answer №3

#servicesGrid
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.service
{
 width:calc(24.75% - 1px);
height:45%;
background:#262626;
display:block;
float:left;
margin:1px;
}

#servicesGrid .service:nth-of-type(2)
{
margin-left:0;
}

#servicesGrid .service:nth-of-type(5)
{
margin-right:0;
}
<div id="servicesGrid">
  <div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0"></div>
<div class="service col"></div>
<div class="service col"></div>
<div class="service col"></div>
<div class="service col"></div>
</div>

Answer №4

When working with a fixed 1px margin, it can be challenging to set a dynamic width without some exceptions, unless you opt for using <table>.

To tackle this issue, I suggest using width: calc(25% - Ypx) on your columns as a solution that is supported across most browsers (http://caniuse.com/#search=calc). Here's an example of how this can be implemented:

.service
{
    width: calc(25% - 2px);
    height: 45%;
    background: #262626;
    display: block;
    float: left;
    margin: 1px;
}

#servicesGrid .service:nth-of-type(2)
{
    margin-left: 0;
    width: calc(25% - 1px);
}

#servicesGrid .service:nth-of-type(5)
{
    margin-right: 0;
    width: calc(25% - 1px);
}

Answer №5

Another approach is to create the illusion of space between elements using a border, and then utilize box-sizing to factor the border into the element's width. Give this code snippet a try:

#servicesGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.service {
  width: 25%;
  height: 45%;
  background: #262626;
  display: block;
  float: left;
  box-sizing: border-box;
}
.service:nth-child(n+3) {
   border-left: 1px solid white;
}
<div id="servicesGrid">
  <div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
</div>

Alternate Solution

If you have the option to employ Flexbox, consider implementing the following code:

#servicesGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:flex;
  flex-wrap: wrap;
  align-content:flex-start;
  align-items:justyfy-content;
  justify-content: space-between;
}
#serviceWide {
  flex:0 1 100%;
  margin-bottom:1px;
}
.service {
  width: 24.8%;
  height: 45%;
  background: #262626;
}
<div id="servicesGrid">
  <div id="serviceWide" class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
</div>

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

Exploring the Canvas with Full Element Panning, Minimap Included

Currently, I am working on incorporating a mini map onto my canvas that mirrors what is displayed on the main canvas. The main canvas includes zoom and pan functions. I have created a rectangular shape for the minimap to display the content of the canvas. ...

javascriptcsshtmlcanvas

Prevent a div from scrolling once it reaches the end of its content, while allowing the other div to continue

I am trying to make the col-md-4 column stop scrolling once it reaches the end of the content, similar to the right sidebar on Facebook. I have attempted using jQuery to add a fixed position when it reaches the bottom, but it is not working as expected. Th ...

htmlcsstwitter-bootstrap

Clickable tab to collapse a section containing an image and aligned text

When using Bootstrap 3, I have a button that collapses a div containing an image and text. The button alternates between showing a '+ More' and a '- Less' message. However, the alignment of the image is off with the text. Is there a way ...

htmlcsstwitter-bootstrap

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

Avoid loading the background image by utilizing CSS to set the background image

Whenever I attempt to assign a background image using CSS, it triggers a console error. This is my CSS code: body { background-image: url("background.png"); background-repeat: no-repeat; } The error message displayed is: GET http://localhost/myWeb/ ...

jqueryhtmlcss

Craft an engaging and dynamic Image map with SVG technology to elevate responsiveness and interactivity

I'm currently working on a website and I need to create two clickable sections on the home page. Each section will lead to a different specialization of the company. To achieve this, I decided to use a square image split into two right-angled triangle ...

javascripthtmlcsssvgresponsive

Learn the process of using calc to rotate images on hover with CSS and Jquery

Is there a way to implement the rotate on hover function for images, similar to what is seen on this website under 'our Latest Publications'? I attempted using calc and skew, however, I was unsuccessful in achieving the desired hovering effect o ...

jqueryhtmlcssmousehover

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

Creating full-width divs using BootstrapLearn how to easily create full-width div

Bootstrap is being utilized in my current project. I have been creating divs inside columns, but they are not extending to the full width of the columns. Below is a snippet of the code: <!DOCTYPE html> <html lang="en"> <head> ...

htmlcssbootstrap-4

Having trouble accessing DOM elements in Durandal

Running on Durandal, this mobile app features names and images on an HTML page. The function below helps format the page: define(function (){ function getAutors(myUrl) { $.ajax({ type: "GET", url: myUrl, data: { num ...

jqueryhtmldurandal

The css cropping issue with sprite image is not being resolved

I'm currently working on creating a sprite image for the bottom links on our media page, but I seem to be having trouble getting the image to crop correctly. Can anyone point out where I may be making a mistake? CSS .footer{ position:absolute; ...

htmlcssimagemenusprite

Aligning HTML form elements side by side

I am having trouble displaying multiple Bootstrap elements and buttons in a single line. Here is an example of what I have: <span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline"> ...

jqueryhtmlcsstwitter-bootstrap

Acquire the model from a field within an Angular Formly wrapper

I'm in the process of designing a wrapper that will exhibit the model value as regular text on the page. Once the mouse hovers over this text, it transforms into a Formly field, which works perfectly fine. However, I'm encountering an issue where ...

javascripthtmlangularjsangular-formly

Looking to display a submenu next to its parent element

I have a list that is not in order: <ul> <li>Parent-1 <ul> <li>Child-1</li> <li>Child-2</li> <li>Child-3</li> </ul> </li> <li>Parent-2 <ul> <li>Ch ...

jqueryhtmlcssmenu

Activate the button solely when the text field has been populated without any spaces

Searching for a solution to my query, but all the suggestions I've encountered don't consider spaces as valid input. In the join function I have, the button should be disabled if the user enters only spaces. A requirement is for actual text inpu ...

javascriptjqueryhtml

What is the method for advancing the cursor to the next line in this animation?

I've created an animation that types out: "[Your Name] blah blah" with a typing effect. Now, I want the cursor to move to the next line and type out: "[Your Father Name] blah blah" I attempted to add <br>, but it types out both lines simulta ...

htmlcss

Is it possible to apply the same styling to multiple elements simultaneously in jQuery by grouping them as in CSS?

Keeping code neat is essential. In CSS, elements can be grouped like this: .element1, .element2, .element3, .element4, .element5, .element6 { font-weight:bold; } I am curious if there is a similar method in jQuery or if each element needs to be set indi ...

jquerycssreadability

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

I'm currently facing a challenge with creating a dynamic HTML template. In order to present data in a table, I need to distinguish between a regular String and an Array. Firstly, the HTML template is embedded within another template using the data-ng- ...

javascriptjqueryhtmlangularjsarrays

updateStatusCallback function is not defined in the Facebook example using jQuery

I've been trying to incorporate Facebook integration into my HTML code, specifically adding features like Facebook login and sharing functionalities. However, I've hit a roadblock in the process. Even after searching extensively for solutions, I ...

javascriptjqueryhtmlajaxfacebook

Creating a JavaScript function that responds to multiple click events

Can someone please help me out? I have the link to the output of my work below using JavaScript and HTML: My goal is for only one circle to be active when clicked, while the others are disabled. Currently, when I click on a circle and then another one, bo ...

javascriptjqueryhtml