How do you make a format with footage down one aspect of a web page matched up with paragraphs on the opposite aspect?

I obtained this precise query in an e mail the opposite day, and I believed it could make a pleasant weblog submit due to how splendidly satisfying that is to do in CSS nowadays. Plus we are able to sprinkle in polish to it as we go.

HTML-wise, I’m considering picture, textual content, picture, textual content, and many others.

<img src=”…” alt=”…” top=”” width=”” />
<p>Textual content textual content textual content…</p>

<img src=”…” alt=”…” top=”” width=”” />
<p>Textual content textual content textual content…</p>

<img src=”…” alt=”…” top=”” width=”” />
<p>Textual content textual content textual content…</p>

If that was our complete physique in an HTML doc, the reply to the query within the weblog submit title is actually two strains of CSS:

physique {
show: grid;
grid-template-columns: min-content 1fr;
}

It’s going to look one thing like this…

So cool. Thanks CSS. However let’s clear it up. Let’s make certain there’s a hole, set the default kind, and reign within the format.

physique {
show: grid;
padding: 2rem;
grid-template-columns: 300px 1fr;
hole: 1rem;
align-items: middle;
max-width: 800px;
margin: 0 auto;
font: 500 100%/1.5 system-ui;
}
img {
max-width: 100%;
top: auto;
}

I imply… ship it, proper? Shut, however perhaps we are able to simply add a fast cell type.

@media (max-width: 650px) {
physique {
show: block;
font-size: 80%;
}
p {
place: relative;
margin: -3rem 0 2rem 1rem;
padding: 1rem;
background: rgba(white, 0.8);
}
}

OK, NOW ship it!

The submit How do you make a format with footage down one aspect of a web page matched up with paragraphs on the opposite aspect? appeared first on CSS-Methods. You possibly can assist CSS-Methods by being an MVP Supporter.