I use CodePen to make some CSS images and grasp "new" CSS tech, like CSS grid. I decided to make an Apple Watch with the modular face. I chose the modular face because it had the most distinct items to layout. I decided to use CSS Grid to layout the different parts. Here's a reference picture to see what I was using for reference.

Apple Watch Modular Face

We can break the modular watch face into 3 columns and 4 rows. The three columns are equal, but the 4 rows are not.Here's a picture showing how I broke down the watch face.

modular watch face break down

As you can see, the 1st row is blank and the thinnest because that is where the notification icon will go. The 2nd and 4th row are the same size, and the 3rd row is the widest. Each row also has a different column layout as well. These configurations are why I chose CSS Grid. CSS Grid offers a way to specify the width of columns and the height of rows based on pixel or how much free space is left in the area.

When using CSS Grid, the first steps are to set the display property to grid and define your template rows and columns. Here's how I did mine:

  .w-face{
  /*additional styling goes here*/
  display: grid;
  grid-template-columns: [fc] 1fr [sc] 1fr [tc] 1fr;
  grid-template-rows: [zr] 10% [fr] 25% [sr] 40% [tr] 25%;
}

The grid-template-columns are divided equally by using the fr unit. 1 fr will give 1 part of the available space. This new unit made dividing the watch face into 3 equal columns take no time. The letters in the brackets allow for the columns to have names. The grid-template-rows are divided by percentage since there are 4 un-even rows.

Another feature of grid that made layout quick is the grid-template-areas property. This allows for grid space to be designated to a specific area.

  .w-face{
  /* previous code from above */
  grid-template-areas:
    ". . ."
    "dat tim tim"
    "act act act"
    "tem con msg";
}

The grid-template-areas property uses . and keywords to designate spaces. A . designates an empty space in the grid. My first row is made up of . . . meaning that all three spots in the row will be empty. I then use keywords to designate which parts of the watchface are what parts of the grid.

The next part to using the grid-template-areas is to tell the pieces inside the grid what their area name is. Inside the class of the element that needs to be placed, use the grid-area property to designate the keyword that represents the space in the grid.

  .date {
  grid-area: dat;
  /* other styling */
}
.time {
  grid-area: tim;
  /* other styling */
}
.act {
  grid-area: act;
  /* other styling */
}
.temp {
  grid-area: tem;
  /* other styling */
}
.cond {
  grid-area: con;
  /* other styling */
}
.msg {
  grid-area: msg;
  /* other styling */
}

With those grid properties in place, the Apple Watch's face is now layed out properly.

Below is the CodePen of the Apple Watch.


1,768 0 8