I want when I resize my items, my grid to take the width of that item. How will I achieve that?
I tried adjusting the widths and using max-width, only the item resized, but not the grid. I tried all this with the second testimony.
#general-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-template-rows: repeat(2, auto);
justify-content: center;
align-items: center;
}
.testimony-two {
background-color: hsl(217, 19%, 35%);
border-radius: 20px;
max-width: 500px;
}
.testimony-one{
background-color: hsl(263, 55%, 52%);
border-radius: 10px;
}
<body>
<section id="general-container">
<article class="testimony-one">
<div> <h2> I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth. </h2> <p> “ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ” </p> </div>
</article>
<article class="testimony-two">
<div> <h2> The team was very supportive and kept me motivated </h2> <p> “ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. ” </p> </div>
</article>
<article class="testimony-three">
<div> <h2> An overall wonderful and rewarding experience </h2> <p> “ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love. ” </p> </div>
</article>
</body>
New contributor
Stephen Mutheu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.