DEV Community

Cover image for How To Create Pixel-Perfect Layout Models
Jose Felix
Jose Felix

Posted on • Updated on • Originally published at

How To Create Pixel-Perfect Layout Models

Creating a website requires using some form of design as a reference. It could be in our heads, in a mock-up or design tool. Our objective as developers is to translate this blueprint efficiently to HTML/CSS while taking into account responsiveness and accessibility. This is no easy task since there is a myriad of ways one could code a layout. One way to achieve responsively, pixel perfect websites is creating a layout model separating website items into sections, blocks, and elements.

This will be a three-part series. This first part will focus on how to create a layout model; the second on what is semantic HTML and its benefits; the last on how to create the layout with semantic HTML and CSS.

Without further ado, let's start!


Before I translate any design to code, I start to divide the page into sections, blocks, and elements. I define each of these as:

  • Element. Is any tag or tags that stand as a unit. These are commonly a text, icon, link, or image.
  • Block. Is a container of one or multiple elements or blocks. It lacks logical meaning. Their main purpose is to organize elements through CSS properties such as flex and grid. Its main HTML tag is the div.
  • Section. Is a container of one or multiple blocks and has a logical meaning. There are many HTML elements that can represent this such as section, article, or header.

What We Will Analyze

Let's look at the next design. Credits to Bakhtiyar Sattarov.

Landing page with hero and navigation bar

Before we start to create our model, take into account that our main objective for creating a layout is to

Get the most efficient layout of sections, blocks, and elements possible. Not necessarily the least amount, but the one that allows a seamless responsive and accessible solution.

Creating a Layout Model

When creating a model, I like to identify sections first. One easy way to achieve this is to sort by its logical meaning within the site. In this case, we can see that we have items that could lead the user to other routes within the site, meaning it is a navigation bar. On the other hand, there's also a hero because it is the main attraction of the website. It brings the user to keep exploring and read what our content is about. Therefore we have two sections: a navigation bar and a Hero.

Landing page with divided sections: hero and navigation bar

Once we have defined the sections, we proceed to identify the block or blocks that our sections will contain. To accomplish this we have to distinguish first its elements.

Recognizing an element is very straightforward since we have to look for any item that is a unit like text, icon, logo, label, or image.

Landing page with selected sections and elements

Now that we have identified the elements all that's left is to define our blocks. Blocks are identified by determining what I call their CSS purpose or how they organize a group of elements. This organization could be of three types: flex, grid, or unnatural.

Flex Block

Flex is the easiest and most common. It lays objects in two dimensions, either in columns or rows. Likewise, elements can be centered and given some unified spacing like space-between, and space-around. Read more on flexbox.

Tip: When you see a group of elements with space between each other and they are either in a column or row, consider it a block that can use flex.

Flex elements in a row

Flex elements in a column

Grid Block

Grid is very straightforward to understand but hard to implement. It lays objects tridimensionally, the same as a matrix. This layout is especially good for galleries. Do note that you can implement the same layout in grid and flex but it will end up less compatible with browsers and sometimes harder to implement.

Grid of elements

Tip: When you see a group of items organized in the form of a matrix, contemplate utilizing the grid.

Unnatural block

Finally, the unnatural block type is an item that uses an absolute, sticky, or fixed positioning. Normally it is anchored to the section (giving the relative position to section tag). They are easily discovered by noticing their awkward but perfect position.

Landing page pointing to block in the middle of the screen

Getting It Together

Now, that we have this information we can start identifying each block.

Complete layout model with elements, blocks, and sections

That's it! Once we have structured the page elements like this, you can translate it easily to semantic HTML and subsequently to CSS.


Creating a model is very important when we want to create an accessible and responsive website. It allows the developer to translate any design to HTML and CSS with ease.

This technique may seem daunting at first, however, with time you will be able to come up with these models quickly in your mind. It will seem as if you are laying blocks in a paper.

What do you think of this technique? Leave your comments below. See you soon in part two 👍💻

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts and receive an awesome weekly resource to stay ahead in web development, head over to

Top comments (4)

insuusvenerati profile image

This might be out of scope for this post but I have a hard time with what you call the "unnatural" elements. For instance, a Modal; How does one "anchor" something that's positioned absolute like that?

joserfelix profile image
Jose Felix • Edited

In the case of a modal it is anchored to the document automatically. So you don't have to explicitly anchor it in a section.

jeremy254 profile image

I liked the article since it serves as an anchor to which I can use to identify and organise my thinking before I undertake a project, contrary to my current method of jumping head first and figuring things out when in knee deep in a catastrophe. Cheers!

expresshermes profile image
Shivam Yadav • Edited

A really good read for developers who lack the habit of following pattern during development. Bravo!