Start by defining your grid

Sketch has 2 built-in layout features — Layout and Grid. In most cases, layout is a great way to organize content on a typical website utilizing a 12 column grid. However for this exercise we will be designing a more dynamic layout with various components.

The subject matter for this project will be based on Nintendo’s Animal Crossing: New Horizons. Each month a new set of fish becomes available. What we will be designing is a visual representation of this highlighting the most valuable, their location & time as well as the value of each fish.

There are 14 new fish being added (2 of which are of a higher value). Our grid should be divisible by 4 and 2.

Setting up a grid in Sketch

Think fluid

The artboard and grid block size isn’t entirely relevant because the layouts should flow easily based on screen size. However to make it easy to design, I will be creating an artboard that is 1760px by 2860px. This means that our grid block size is 220px by 220px.

Mobile-first… and also desktop first

Mobile-first has been a big term used over the past few years. In short it means to design for mobile users first because, odds are most people use their phones as their primary device when browsing the internet. This doesn’t mean that we should ignore desktop. So we will be designing for desktop first but will keep in mind how we want things to flow when they end up on a mobile device. Since we will have 2 variations for displaying our fish (featured fish taking up a 4×2 space and general fish taking ups a 2×2 space) we can reuse these components when adapting our content.

Image for post

Reusable components

Creating your visual assets

When creating the components of your design, keep some kind of hierarchy to the content. Also make sure to create re-usable items. This will not only reduce the overall weight of the project, but it will also help to create a cohesive message. Start with a baseline for your heading 1 then work your way down.

Image for post

Heading and body copy sizing

Utilize CSS properties

One of the most undervalued aspects of designing in Sketch is that it limits you to only work with available CSS attributes. This significantly increases the possibility that your final designs are able to be programmed.

Sketch also allows you to grab usable CSS from components that you have created, Things like CSS gradients (not necessarily hard to program but are tedious to code), can be easily copied and pasted into your stylesheet.

SVGs & FontAwesome

If at all possible create your illustrations or icons as vectors and output as an SVG file. I created my illustrations in Adobe Illustrator, then imported them into Sketch — keeping them in a vector format. This will ensure that your content will retain its quality no matter what the device. SVGs are also often much smaller than JPGs or PNGs.

Fish Illustrations — SVG format

Another great tool for gathering assets for your design that is both light-weight and scalable is FontAwesome — The internet’s most popular icon set and toolkit. Simply download FontAwesome to your computer and install it like any other font. Once installed visit their icon page and search for the icons you want to use. When you find the right icon, you can copy it to your artboard then return to Sketch to paste it in your text field with the FontAwesome font selected.

Image for post

FontAwesome —

Dynamic background images

We have already established that you must create fluid designs. This becomes challenging when working with busy bitmap images. Luckily there is a CSS attribute that helps make background images adapt with ease. When appending a background image, there is a property known as “background-size”. One of the values of background size is “cover”. What this does is fit your image to the allocated area by scaling and cropping the top and bottom of the image as the viewport changes in size. So when choosing your background image be sure to have some extra room all around the main focal point so if it does get cropped your main point of interest is protected.

Image for post

Background image — Larger than container

Assembling the design

Image for post

Wireframe layout

As you can see, the completed design works within the grid that we established in step one. Once your initial wireframe is established, then you can apply styles — colours, icons, images etc. As noted earlier, try and use as many CSS techniques as possible to ensure that your design is possible and that it can be developed in an efficient way.

Because our layout is fluid, the columns and row heights are based on the content inside. We use padding to keep enough white space around each object. In Sketch if you hold the “Option” key and mouse over the space between objects it will show you the space in pixels between each item. This allows us to keep consistent spacing which would be converted to padding or margins when being programmed.

Keep your files clean. Make sure to group your items and create symbols for recurring items like, lists, highlights and callouts.

Image for post

Using Layers in Sketch

Let’s get coding


Start with your HTML. Build out the overall structure and hierarchy of your content. When creating the nested grid items, there are two ways we can target them with CSS. The easiest route would be to give each container (div) a unique class name — for example “hero”. This will make things easier to reference when we write the CSS. Alternatively if we want to keep the HTML clean, or if the HTML is automatically output in a loop (like an app built with React which could loop through data in a JSON file), we can target inner divs using pseudo-classes.

Image for post

The above achieves the same goal. The left example targets divs with unique classes while the right example looks at nested divs (all with the same class name) and targets them in order of their appearance.


There are a ton of property options to be used with CSS grid, but to keeps things simple and to keep the focus on design, we will only be utilizing the “grid-template-areas” property.

Most of the heavy lifting when building our grid is going to be handled by the container. But before we get there we need to define our grid items. The best part about this is that we can give them easy to remember names (see image above).

Once the names are established and associated with a container we write out the HTML.

Image for post

HTML Structure

Image for post

Visual representation of HTML code structure

Making things responsive (Adaptive)

Often the term “responsive” is used when talking about the conversion of a desktop site to devices with smaller screens — the layouts respond to the screen size. In reality when done properly, the layouts we should be creating are “adaptive” layouts. We don’t want the content to just get shuffled around aimlessly for smaller screen sizes, we want the content to be oriented in a way that is optimized for the best user experience.

Luckily, CSS Grid makes this incredibly simple. The “grid-template-areas” property allows us to build out our grid by referencing our grid-area names as cells in the grid.

Image for post

Using grid-template-areas in CSS

Lines 131–133 set up our grid. We first set the container to be displayed as a “grid”. Line 132 sets up our columns. What the code translates to are 8 equal columns. “1fr” indicates “one fraction” of the entire width (so in short, 8 equal fractions). Line 133 sets up our rows using the same method as noted above.

Using the grid area names defined in our stylesheet, we work row by row as seen above. On line 135, 136 & 137 we see “hero” taking up 8 cells across and 3 cells down. On lines 138 & 139 we see “dorado” taking up the first 4 cells in the fourth and fifth row while “great-white-shark” takes up the last 4 cells in the same row.

When making the layout adaptive, we simply need to use a media query to target the screen size, then adjust the values of our “grid-template-areas” property.

Image for post

Responsive programming — grid-template-area -for devices with screen sizes smaller than 600px in width

The Final Product

The final product is a light-weight easily adaptable layout to enhance the overall user experience.

Image for post

Animal Crossing — June Fish Guide — Desktop view

Image for post

Animal Crossing — June Fish Guide —Mobile view

The best approach to designing layouts to be programmed with CSS Grid is to take things one step at a time always anticipating how objects should react across multiple devices.

While this guide doesn’t provide extensive information around CSS programming as a whole, I hope that the information provided helps designers to get a better understanding of the relationship between code and design.

Article by: Lee Travaglini (

Every great design begins with an even better story.

Lorinda Mamo, designer

Leave a Reply