Creating grid layouts and website navigations with Foundation

The very first thing we should look at is the grid system from Foundation, which is called XY Grid. In web development, a grid system is a system that structures our HTML elements into a grid-based layout. Foundation comes with CSS classes that we can use to structure our HTML elements easily and effortlessly, for example:

<div class="grid-x">
  <div class="cell medium-6">left</div>
  <div class="cell medium-6">right</div>
</div

This will responsively structure our elements into two columns on large screens (for example, iPad, Windows Surface), but a single column on small screens (for example, iPhone). Let's create a responsive layout in the default index.vue page and website navigation in the default.vue layout generated by the create-nuxt-app scaffolding tool in the following steps:

1. Delete the Logo.vue ...