Display Grid width for the first column

Question

I have this sample:

Code pen or snippet :

.parent {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   color: white;
}

.div1 { 
  grid-area: 1 / 1 / 3 / 2;                     
  background: red;
}

.div2 { 
  grid-area: 1 / 2 / 2 / 6; 
  background: purple;
}
.div3 { 
  grid-area: 2 / 2 / 3 / 5; 
  background: blue;
}
.div4 { 
  grid-area: 2 / 5 / 3 / 6; 
  background: black;
}


  
    
  
  Div 2
  Div 3
  Div 4

As you can see, the red column is wider than the logo.

I want it to be as big as the logo, can we do this with a display: grid?

user_10785975 · Answer

You might use auto if you want column width to shrink to element size it is holding. Just apply it to 1st column as follows

.parent {
   display: grid;
   grid-template-columns: auto 1fr 1fr 1fr 1fr;
   grid-template-rows: repeat(5, 1fr);
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   color: white;
}

.div1 { 
  grid-area: 1 / 1 / 3 / 2;                     
  background: red;
}

.div2 { 
  grid-area: 1 / 2 / 2 / 6; 
  background: purple;
}
.div3 { 
  grid-area: 2 / 2 / 3 / 5; 
  background: blue;
}
.div4 { 
  grid-area: 2 / 5 / 3 / 6; 
  background: black;
}


  
    
  
  Div 2
  Div 3
  Div 4

user_7818412 · Answer

You can do

.div1 img {
    width: 100%;
    height: 100%;
}

user_15234061 · Answer

if your logo's width is 100px , you can convert your code like this:

instead if your logo's width not fixed, you can remove the width=100px in your logo tags :

two ways you can try it all

Display Grid width for the first column

3 Answers