CSS Full-Width Grid - Columns With Even Margins

I'm trying to make a responsive grid with 4 columns that fills the whole width of the screen on the desktop version, but adding margins to space them out in-between obviously means

Solution 1:

if you use % for width , i suggest you use % for margins also. so you will be sure you add up to 100% .

the idea is that 4*colwidth + 3*margins = 100%

so, using a margin-right:0.5% to all .col elements except the last one ( nth-of-type(5) ) , then you will have the width of 100% - 3*0.5% = 98.5% / 4 = 24.625%

where: 100% is the width of the servicesGrid, 3 is the number of 0.5% margins given to the first 3 cols, 98.5% is the remaining space occupied by the 4 col, and dividing it by the nr of col gives you the width of every col

#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>

Solution 2:

You could make use of calc for the width. This will allow you to specify a value (the margin) to subtract from the width. Just be aware of the browser support, which is all modern browsers.

jsfiddle

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

Solution 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>

Solution 4:

Since you wanna work with a fixed 1px margin, you should calc your width (the way the margin is set, it's very hard for you to set a dynamic width without a small exception - unless you want to use <table>)

This way, I recommend you to use width: calc(25% - Ypx) on your columns. Is supported on the overall browsers (http://caniuse.com/#search=calc). This worked out using this:

.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);
}

Solution 5:

One option is use a border to fake the space between elements, then you can use box-sizing to include the border inside the width. Try this code:

#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>

---

Second Option

If you can use Flexbox, then try this 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>