Hannah Oppenheimer

Product Designer, Ice Cream Maker

Soccer Formations in CSS Grid

08 November 2017

I’ve been having a ball playing around with CSS Grid. To kick off my first blog post, here's how I implemented a few popular soccer formations using one flexible CSS Grid.

I started with a sketch on paper with marker, visually thinking through how I would lay out players on a grid.

In soccer, there are a bunch of ways teams can strategically position their 11 players on a field. While there's always a goalkeeper, a team might choose a specific formation for the rest of their crew depending on how fast their star forward is, or how many quality defenders there are, or (in cases not covered by this post) when the team is playing down a player or so, due to penalties. I decided to go with three popular formations:

Then, I implemented each formation on Codepen. I needed a grid with 4 columns (goalkeeper, defenders, mid-fielders, and forwards) for each formation. But the minimum number of columns varied between the formations.

For example, for 4-4-2, I would need a minimum 4 rows, because each defender and mid-fielder would take up 4 rows, and the 2 forwards could each take up 2 rows.

See the Pen 4-4-2 Soccer Formation in CSS Grid by Hannah Oppenheimer (@opihana) on CodePen.

But, for 3-4-3 and 4-3-3, I would need a minimum of 12 rows because 12 was the lowest common product of numbers 4 and 3.

See the Pen 3-4-3 Soccer Formation in CSS Grid by Hannah Oppenheimer (@opihana) on CodePen.

So, in my first implementation, I used a unique set of grid-template-rows on the container for the field. One had 4 rows and the others had 12 rows.

Now, I wanted to be able to toggle between each formation on a single codepen. I realized I had a choice about the grid container because of the varied number of rows. I could:

I chose the second option. My goal was to only change how many rows each player would span, and to NOT change the grid itself. So, I had to consider “lowest common product” challenge again. For all the formations, that number was 12.

So for a soccer field on which players would move, but the field would stay the same, I needed 4 columns and 12 rows. And this is the end result.

See the Pen Soccer Formations in CSS Grid by Hannah Oppenheimer (@opihana) on CodePen.

I enjoyed the challenge of making this Codepen, and love playing with CSS Grid. If you have any questions, go ahead and ask me on twitter. If you're in need of design, or front-end development, I might be available for contract work. Email me.

*All puns intended in the first paragraph