Solution Review: CSS Grid Challenge

Solution review: Responsive mini-website

Let’s have a look at the solution first.

Example

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

All the elements must have a border-box around them so that the padding and border are included in an element’s total width and height. The default margin and padding of all the elements are set to 0 because we want to add our custom values.

body {
  font-family: 'Helvetica Neue';
}

The font-family used in the challenge is Helvetica Neue.

#navbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: #ddd;
}

The navbar is displayed as a grid by using display: grid;. The grid-template-columns property is used to define the structure of the grid items and how they are aligned. The auto-fit property wraps around the element when the width is not large enough to fit them in without any ...