Utilizing Pseudo-elements with CSS Grid

This week I’ve had a few eventualities the place I’ve wanted to construct a hero part with a full-width picture, a big heading and a translucent sidebar overlaying the picture – the place the sidebar bleeds to the sting of the viewport however (crucially) the content material of the sidebar aligns to what I wish to name the “wrapper” grid columns – i.e. the columns of the grid the place we really need to place our content material. (I’ve a complete different publish virtually written on this!)

This appears to be a reasonably widespread prevalence with the designs which can be coming my manner lately, and it looks like a major case for utilizing pseudo-elements (::earlier than or ::after) as baby gadgets of the grid.

The markup for my grid appears like this:

<div class="grid">
	<div class="grid__fig">
	</div>
	<div class="grid__heading">
		<h1>CSS Structure Information</h1>
	</div>
	<div class="grid__btn">
		<a href="#0">Subscribe</a>
	</div>
	<apart class="grid__sidebar">
		<ul class="sidebar__list">
			<li class="sidebar__item">...</li>
			<li class="sidebar__item">...</li>
			<li class="sidebar__item">...</li>
		</ul>
	</apart>
</div>

The div with a category of .grid is, unsurprisingly, our mum or dad grid container, which we have to give the property attribute show: grid.

.grid {
	@media (min-width: 800px) {
		show: grid;
		grid-template-columns: [start] minmax(20px, 1fr) [wrapper-start] repeat(8, var(--col)) [sidebar-start] repeat(4, var(--col)) [wrapper-end] minmax(20px, 1fr) [end];
		grid-template-rows: minmax(3em, 1fr) auto minmax(auto, 1fr);
		grid-gap: var(--gutter);
		min-height: 100vh;
	}
}

Right here I’m utilizing CSS Variables to make the code extra versatile and maintainable – when you want a primer I wrote a bit about them right here. I’m additionally naming my grid strains to make it simple to position my gadgets.

We have now three direct youngsters of the grid container: The background picture (.grid__fig), the heading and the sidebar, which might all be positioned on the grid. The grid line wrapper-end is the place I need the content material of the sidebar to finish, however the sidebar background wants to finish on the the very fringe of the viewport – the finish grid line. Moderately than inserting the sidebar like this:

.grid__sidebar {
	grid-column: sidebar-start / finish;
}

I can place it the place I need the content material to go:

.grid__sidebar {
	grid-column: span 3 / wrapper-end;
}

(Moderately than including one other named grid line, which could make the grid-template-columns property begin to get a bit long-winded and complicated – notably if we’ve got much more gadgets we need to place – I’m simply utilizing span 3 to point I need it to at all times span 3 columns, and wrapper-end as the road the place I need it to finish. It’s actually helpful to have the ability to swap the syntax round this manner.)

Now I simply must create a pseudo-element for the sidebar background and place it on the grid. To be able to act as a grid baby merchandise it must be a pseudo-element of the grid container, not of a grid baby:

.grid::after {
	content material: '';
	show: block;
	grid-column: sidebar-start / finish;
	grid-row: 1 / 4;
	background-color: rgba(#f405ed, 0.5);
}

The sidebar background is now in entrance of the sidebar content material, so we simply must tweak the z-index somewhat:

.grid__sidebar {
	grid-column: span 3 / wrapper-end;
	...
	z-index: 1;
}

Right here’s the top consequence (a homage to the magnificent CSS Structure Information!):

See the Pen CSS Grid – CSS Structure Information instance by Michelle Barker (@michellebarker) on CodePen.

###Sources

As at all times, there are tremendous good individuals who have written about these things in-depth:

• Fake Grid Tracks by Eric Meyer
• Styling Empty Cells with Generated Content material by Rachel Andrew