Maximum column grid

Example

A brightly lit room with a sofa and other furnishings.
The images here use min-block-size: 22rem;
object-fit: cover; block-size is the logical property for height. object-fit set to cover crops the image so it retains its aspect ratio.

Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nam minus quae itaque autem ullam officiis quasi quidem quia natus, necessitatibus iure, ratione.
The divs contain this shorthand property place-content:center; which justifies and aligns content
A brightly lit room with a sofa and other furnishings.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nam minus quae itaque autem ullam officiis quasi quidem quia natus, necessitatibus iure, ratione.

Code

HTML

<div class="max-col-grid"> 

 <div><img src="sofa.avif"
 alt="A brightly lit room with a sofa and other furnishings." 
 loading="lazy" width ="1000" height="667"></div>

 <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> 

 <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> 
 
 <div> <img src="sofa.avif" 
 alt="A brightly lit room with a sofa and other furnishings."
 loading="lazy" width ="1000" height="667"></div>

 <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

</div>/* end of grid */

CSS

.max-col-grid {

/*--------Settings-------*/ 
--grid-col-count: 3;
--grid-gap: var(--space-m);
--grid-item-min-width: 22rem;
/*------------------------*/ 

--gap-count: calc(var(--grid-col-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-gap));
--grid-item-max-width: calc((100% - var(--total-gap-width))
/ var(--grid-col-count));
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(max(var(--grid-item-min-width),
var(--grid-item-max-width)), 1fr));
gap: var(--grid-gap);
padding-block: var(--grid-gap);
}

Summary

This CSS grid snippet uses the RAM technique (repeat, auto-fit and minmax) which creates an intrinsic grid with one line of code as shown here:

grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

Often a min of 100% is added to stop overflow:

grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));

The snippet above allows us to limit the columns created.