FrontEndMentor.io Four Card Feature Section Solution: No CSS Grid, Flexbox or Positioning

How I re-created this section of the design challenge

Spoiler alert: do not read if you haven’t completed the Four Card Feature Section challenge on FrontEndMentor.io

What we will re-create, at least in skeleton form

Why this challenge?

• In the slack group’s #help channel, this challenge gives people the most pause
• Amongst the solutions featured on the website are many using CSS Grid, Flexbox and absolute positioning
• My gut was telling me there must be an easier way…and there is!

Hint: the answer is in the challenge description

…This will test anyone who is new to multi-column and responsive layouts.

My solution: using multi-column layout

First, the HTML

<ul class="card-group">
  <li class="card">
    <h2>Supervisor</h2>
    <p>Monitors activity to identify project roadblocks</p>
    <div class="icon"></div>
  </li>
  <!-- three more -->
</ul>

• An unordered list with four list items
• Three classes: card-group, card and icon
• Each list item contains three elements, a level-2 heading, a paragraph, and in this case a placeholder to simulate the icon

Let’s build up the CSS to fully understand what each property: value pair has on the layout.

No CSS shows us a bulleted list with four items. Semantic, understandable, simple.

.card-group {
  list-style: none;
  margin: 0;
  padding: 1rem;
  font-family: sans-serif;
}

Some initial styles applied to the unordered list

.card-group {
  list-style: none;
  margin: 0;
  padding: 1rem;
  font-family: sans-serif;
  column-count: 3;
}

With column-count: 3; we instantly get three columns!

.card-group {
  list-style: none;
  margin: 0;
  padding: 1rem;
  font-family: sans-serif;
  column-count: 3;
  column-gap: 3rem;
}

column-gap adds space between each column. This will be important when we add shadows to each list item

.card {
  display: inline-block;
}

Using inline-block for each list item forces the content inside to clump together and not break columns

.card {
  display: inline-block;
  box-shadow: 0 7px 16px #d7e0ea;
  border-radius: 6px;
  border-top: 5px solid black;
  padding: 1rem;
  margin-bottom: 3rem;
}

Adding styles to more closely mimic the design

.card:nth-child(3n + 1) {
  display: block;
}

Setting every third item after the first one to display: block; causes it to hog its column

.card:nth-child(3n + 1) {
  display: block;
  transform: translateY(50%);
}

We use translateY to move these same items lower vertically within their column, simulating a horizontal centering

.icon {
  width: 80px;
  height: 80px;
  background-color: black;
}

The black box is a placeholder for each icon. Only one more step: align the icon to the right-hand side of the item

.icon {
  width: 80px;
  height: 80px;
  background-color: black;
  margin-left: auto;
}

It couldn’t be easier: margin-left: auto; does the trick!

Layout re-creation successful using multi-column

• No need for CSS Grid and the HTML it would require
• No need for CSS Flexbox and the HTML it would require
• No need for absolute and relative positioning
• The real heroes of this solution are four CSS property:value pairs and a pseudo-selector!

I hope this helped show you that most of these challenges are solvable with less complexity in your HTML and CSS.