Display Grid width for the first column-CodePudding

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 >
  <div >
    <img src="https://png.pngtree.com/element_pic/00/16/07/115783931601b5c.jpg" width="100px"/>
  </div>
  <div >Div 2</div>
  <div >Div 3</div>
  <div >Div 4</div>
</div>

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?

CodePudding user response：

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 >
  <div >
    <img src="https://png.pngtree.com/element_pic/00/16/07/115783931601b5c.jpg" width="100px"/>
  </div>
  <div >Div 2</div>
  <div >Div 3</div>
  <div >Div 4</div>
</div>

CodePudding user response：

You can do

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

CodePudding user response：

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 : <img src="https://png.pngtree.com/element_pic/00/16/07/115783931601b5c.jpg"/>

two ways you can try it all