is there a way to automatically make a child in a grid element go down if the parent's width is-CodePudding

.imgcont {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.imgcont img {
  width: 400px;
  max-height: 400px;
  margin: -50% 0 0 -50%;
}

.imageconcon {
max-width:70%;
  width: max-content;
  display: grid;
  grid-template-columns: repeat(3, 0.7fr);

  box-shadow: 0px 2px 10px black;
}

<div >
  <div >
    <img src="https://randomwordgenerator.com/img/picture-generator/55e2d5424a57ab14f1dc8460962e33791c3ad6e04e507440712b7bd29548cd_640.jpg"></div>
  <div >
    <img src="https://randomwordgenerator.com/img/picture-generator/55e6dc414a54af14f1dc8460962e33791c3ad6e04e5074417c2f7cd3924fc7_640.jpg"></div>
  <div >
    <img src="https://randomwordgenerator.com/img/picture-generator/55e4d5434a54a514f1dc8460962e33791c3ad6e04e5074417d2e72d1974ec1_640.jpg"></div>
</div>

I want the imgconcon's children to go down and start a new column if the imgconcon's width is 70% of the screen, how do I doo this?

CodePudding user response：

you have to define the grid with

grid-template-columns: repeat(auto-fill, {sizeOfAColumn});

don't put the width at column or image level let the grid define it

.imgcont {
  height: 200px;
  overflow: hidden;
}

.imgcont img {
  max-height: 400px;
}

.imageconcon {
  max-width: 70%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  box-shadow: 0px 2px 10px black;
}

<div >
  <div >
    <img src="https://randomwordgenerator.com/img/picture-generator/55e2d5424a57ab14f1dc8460962e33791c3ad6e04e507440712b7bd29548cd_640.jpg" /></div>
  <div >
    <img src="https://randomwordgenerator.com/img/picture-generator/55e6dc414a54af14f1dc8460962e33791c3ad6e04e5074417c2f7cd3924fc7_640.jpg" /></div>
  <div >
    <img src="https://randomwordgenerator.com/img/picture-generator/55e4d5434a54a514f1dc8460962e33791c3ad6e04e5074417d2e72d1974ec1_640.jpg" /></div>
</div>