Make a Poster Graphic with HTML and CSS Using Grid Template Areas — and NO Graphics Program

The Requirement

A client asked me to create an improved version of a poster graphic to be embedded in a marketing email.

The main problems with the original graphic were color contrast and readability (too much prose text where bullet lists would be better).

The Original Graphic

The client sent the original graphic to me as a pdf (see below), and I opened it in Adobe Illustrator, intending to make the necessary modifications there.

If you’ve ever opened a PDF in a vector graphics program expecting to find all the elements neatly and properly arranged in appropriate layers, you know that’s usually an exercise in futility.

I really did not want to recreate the graphic from scratch. Although I have some Adobe Illustrator skills, I much prefer creating things in HTML and CSS. Then I stepped back and looked at the original graphic again. Holy cow! If ever there was a use case for CSS grid and grid template areas, this was it!

(Go here for the basics of CSS Grid layout concepts. For a good introduction to CSS Grid Template Areas, watch this Wes Bos YouTube Video and check out this page on the MDN Website.)

The Desired End Result

So I fired up VS Code, wrote the requisite HTML and CSS, tweaked things until they were right, and took a screenshot of the resulting HTML page to turn it into this PNG graphic:

Keyed Diagrams

As you look over my HTML and CSS code, refer to these illustrations. The red borders delineate the grid areas, and the labels are the names for those grid areas — this should make more sense when you review the HTML and CSS.

Here is the same illustration, with the background content semi-transparent to make it easier to see the grid areas.

The HTML Code

Here is the complete HTML code for the flyer.

Note that there are seven (7) “sections” (highlighted; they are actually divs with a class of “section”) inside the ‘flyer’ container div. Each “section” div has a second class that corresponds to its respective grid area. Note: Making the class name identical to the grid area name (which you’ll see momentarily) is not required, but it makes sense.

<div class="flyer">
	<div class="section crest"></div>
	<div class="section intro">
		<div class="wrap">
			<h2 class="leap-heading">LEAP Into Summer</h2>
			<h3 class="subhead">with Eaton Academy's LEAP Program</h3>
			<p class="target">For <em>high school students</em> &amp;<br /><em>young adults</em> with special needs</p>
		</div>

		<div class="list-wrap">
			<div class="column column-1">
				<p class="col-heading">Activities:</p>
				<ul>
					<li>On-Campus Cooking Class</li>
					<li>Onsite Job Skills</li>
					<li>Money Management</li>
					<li>Social Skills &amp; Outings</li>
					<li>Carpentry</li>
				</ul>
			</div>
			<div class="column column-2">
				<p class="col-heading">Our Partners Include:</p>
				<ul>
					<li>Crust Pizza</li>
					<li>Burlington</li>
					<li>Longhorn Steakhouse</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="section chef"></div>
	<div class="section carpentry"></div>
	<div class="section calendar">
		<h2>Calendar</h2>
		<div class="tuition-wrap">
			<div class="sessions">2 3-Week Sessions:</div>
			<div class="item">June 5-30</div>
			<div class="item">July 10-28</div>
			<div class="item">Mon-Fri, 9a-3p</div>
		</div>
	</div>
	<div class="section tuition">
		<h2>Tuition</h2>
		<div>$2,200 per 3-week session</div>
		<div class="btw">Includes outings and lunch made by LEAP Participants</div>
		<div>
			Email Scott Baldrich for more information: sbaldrich@eatonacademy.org<br />
			or visit<br />https://eatonacademy.org/summer-leap/
		</div>
	</div>
	<div class="section table"></div>
</div>

The CSS Markup

Now let’s look at the CSS.

The .flyer Div

Here’s the rule for the .flyer container div:

.flyer {
	display: grid;
	grid-gap: 0;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
		"crest 		intro 		intro"
		"chef 		intro 		intro"
		"chef 		carpentry 	calendar"
		"tuition 	tuition 	table";
	max-width: 700px;
	padding: 1px;
	background-color: var(--color-blue);
	border: 4px soild var(--color-blue);
	font-family: var(--ff-3);
	font-weight: 300;
	margin-inline: auto;
	margin-top: 2em;
}

The highlighted rows are most important here.

Line 2: I set the display to grid.

Line 4: I specify that there be 3 columns, each of which takes up one fractional unit of the whole container (i.e., 3 equal-width columns). Note that I have not specified the number of rows; the content will take care of that.

Lines 5-9: This is where I identify the grid template areas. Admittedly, the syntax for this grid-template-areas property is quite odd — uniike pretty much any other CSS property I’ve ever encountered. In a way, it’s a throwback to the days of creating graphics with ASCII characters. But if you look at the CSS markup and the illustration together, reading each left-to-right and top-to-bottom, you should be able to see exactly how things work.

	grid-template-areas:
		"crest 		intro 		intro"
		"chef 		intro 		intro"
		"chef 		carpentry 	calendar"
		"tuition 	tuition 	table";

Mapping Sections to Grid Areas

Finally, here are the CSS rules that map the sections to the grid areas. Note that the crest, chef, carpentry, and table divs are all empty of content but have background images specified in the CSS.

.crest {
	grid-area: crest;
	background-image: url(images/crest.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #fff;
}
.intro {
	grid-area: intro;
	background-color: var(--color-blue);
	color: #fff;
}
.chef {
	grid-area: chef;
	background-image: url(images/cooking-03.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.carpentry {
	grid-area: carpentry;
	background-image: url(images/carpentry.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.calendar {
	grid-area: calendar;
	text-align: center;
}
.tuition {
	grid-area: tuition;
	text-align: center;
}
.table {
	grid-area: table;
	background-image: url(images/cooking-04.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

Summary

I’m not advocating for deleting your graphics program and turning to HTML and CSS for all graphics work. I fully understand that this particular graphic clearly lent itself to being generated with HTML and CSS (specifically CSS Grid and Grid Template Areas) and that many graphic design projects won’t. But I’ll tell you: This was fun, and I learned a bunch. Until creating this flyer graphic, I think I’d used CSS grid template areas only one time in “production”. You can bet I’l be looking for other opportunities/excuses to do so in the future.

Let me know in the comments what you think of this application of CSS Grid. Would you have done what I did? Do you have suggestions for doing this in a different or better way? I’d like to hear from you.