Columns with different vertical separations

Question

Columns with different vertical separations

Navigation

#1 by (5 votes)

1

As I now have the code with grid-column-gap: 3%; , I have a separation between each column of 3% and that's fine, but I want between block 2 and block 3 there's only 1% separation.

I've tried putting grid-column-gap: 3% 1% 3%; but it does not work. Any ideas?

.contenedor {
	margin: 30px;	
	display: grid;
  grid-column-gap: 3%;
  grid-row-gap: 5%;
  grid-template-columns: 30% repeat(2, 10%) 30%;
  grid-template-rows: 100px;   
}
.bloque {
	padding: 2%;
  background-color: blue;
  color: white;
  line-height: 100px;
  text-align: center;
}

<div class="contenedor">
  <div class="bloque">Bloque 1</div>
  <div class="bloque">Bloque 2</div>
  <div class="bloque">Bloque 3</div>
  <div class="bloque">Bloque 4</div>
</div>

I also want it to be centered with respect to the screen.

css css-grid-layout

asked by Isaac Palacio 15.02.2018 в 10:48

source

1 answer

strpos always returns 0 in this rule Replace, by. to the flight with javascript

score 5 · Accepted Answer

It happens that the grid-column-gap property does not allow more than one value per grid, that is, it is not a grouped property. Source: Mozilla Documentation W3C Official Documentation

However, you could solve it by using the margin property in negative for the case you propose, for example:

.bloque:nth-child(2){ margin-right: -0.5em; } /*o la medida que prefieras*/
.bloque:nth-child(3){ margin-left: -0.5em; } /*o la medida que prefieras*/

.contenedor {
	margin: 30px;	
	display: grid;
  grid-column-gap: 3%;
  grid-row-gap: 5%;
  grid-template-columns: 30% repeat(2, 10%) 30%;
  grid-template-rows: 100px;   
}
.bloque {
	padding: 2%;
  background-color: blue;
  color: white;
  line-height: 100px;
  text-align: center;
}

.bloque:nth-child(2){ margin-right: -0.25em; }
.bloque:nth-child(3){ margin-left: -0.25em; }

<div class="contenedor">
  <div class="bloque">Bloque 1</div>
  <div class="bloque">Bloque 2</div>
  <div class="bloque">Bloque 3</div>
  <div class="bloque">Bloque 4</div>
</div>

Very different for example is to use the grouped property grid-gap (suddenly there is confusion) that combines the properties grid-column-gap and grid-row-gap .