Problem with grid-gap and fr

Navigation
1

I'm in a somewhat silly problem, I have two section grid , which the first one has 4 div with the property grid-template-columns: 1fr 1fr 1fr 1fr; and the second section have 3 div with the property grid-template-columns: 1fr 2fr 1fr; ie the center div has 2fr unlike its siblings on the sides with 1fr . What I need is that the divs of both section are aligned vertically and are of the same size, that is, the div of 1f are the same ancho .

Although both section have the same grid-gap: 20px; , there still remains a small difference in spacing and size.

I think the problem is in the grid-gap I'm having, but I'm really confused I do not know how to calculate, to achieve what is necessary.

I appreciate the help. 

section{
  margin: 0 auto;
  width: 500px;
  height: 200px;
  border: 5px solid #000;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 20px;
}
.section1{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.section2{
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;
}
section > div {
  background: #faf;
}
<section class="section1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>


<section class="section2">
  <div></div>
  <div></div>
  <div></div>
</section>
    
asked by Gabriela 16.10.2018 в 09:27
source

2 answers

2

The problem is that in the first section there are 3 holes of 20px and in the second only 2, using fr will always be 20px in the air.

What you can do is force in px the second column of the second section so that it fits well. 

 grid-template-columns: 1fr 240px 1fr;


section{
  margin: 0 auto;
  width: 500px;
  height: 200px;
  border: 5px solid #000;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 20px;  
}
.section1{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.section2{  
  grid-template-columns: 1fr 240px 1fr;
  grid-template-rows: 1fr;
}
section > div {
  background: #faf;
}
<section class="section1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>


<section class="section2">
  <div></div>
  <div></div>
  <div></div>
</section>
    
answered by 16.10.2018 / 13:41
source
1

At the time I thought it could not be done dynamically but it was as easy as putting a percentage in the center column. As in the upper grid you have 4 columns you need a column that occupies half, 50%.

There is still a small gap because in the top grid you have 3 spaces between columns and in the bottom only two, the solution is to use calc and subtract that difference, in this case 10px. I put the section in percentages so that it is visible that even if the size changes, the columns remain aligned: 

section{
  margin: 0 auto;
  width: 50%;
  height: 200px;
  border: 5px solid #000;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 20px;
}
.section1{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.section2{
  grid-template-columns: 1fr calc(50% - 10px) 1fr;
  grid-template-rows: 1fr;
}
section > div {
  background: #faf;
}
<section class="section1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>


<section class="section2">
  <div></div>
  <div></div>
  <div></div>
</section>
    
answered by 15.11.2018 в 14:36
Help JOINS ORACLE SQL query Problem to update record with combobox?