Summary:

<aside> 💡 CSS Grid- divides a page into major regions or defines the relationship in terms of size, position, and layer, between parts of a control, built from HTML primitives.

</aside>

Website Layout:

A website is usually divided into headers, menus, content and a footer.

Example of website design layout.

Header:

This is often found at the top of a website (or underneath the top nav men). Contains the logo or the name of the website.

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Header example

Nav Bar:

This contains a list of links to help people moving through the website.

{
 /* Navbar links */
 .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

Link example

Content:

This depends on the type of screen the website is being designed for.

Types of Layout:

• 1-column (used for mobile screens)
• 2-column (used for tablets & laptops)
• 3-column (used for desktops)

{
 /* Clear floats after the columns */
 .row: after 
   content: "";
   display: table;
   clear: both;
}