Cascading Style Sheets (CSS) continued...

Page Layout

When it comes to a website, now you have some additional tools to control the layout of content. As a quick review:

CSS grid

CSS Grid Layout Module is still a W3C Candidate Recommendation (since 2017), but it is nevertheless widely adopted by most major browsers. We can use this new CSS technique to easily define a two-dimensional grid-based layout system to create great websites.

In order to define the CSS grid, we need set four properties within our stylesheet: 

display: grid;
grid-template-areas: (VALUE(S));
grid-template-columns: (VALUE(S));
grid-template-rows: (VALUE(S));
The above lines first enable the grid layout, then specify the areas we would like the content of our website to be displayed in and lastly define the total number of columns and rows of the grid. Carefully review the below example, adapted from Example 9 of the CSS Grid Layout Module Level 1 to better understand the use of the CSS grid technique. It creates the following page layout:

grid 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset = "utf-8">
  <title>Grid Layout</title>
  <style>
    .grid {
      display: grid; /* This line sets the display to grid */
      grid-template-areas:
      "header header"   /* These 3 lines specify the specific area layout of your grid; any names can be used*/
      "nav content"      /* The first row is all header area, the second is split NAV - CONTENT */
      "footer footer";  /* and the third row is all footer content.*/

      grid-template-columns: 1fr 3fr; /* Grid layout introduces fractions as a measurement */
      grid-template-rows: 15% 75% 10%;    /* Both the vertical & horizontal layout can also use px, auto, or %  */
      grid-gap: .5em;
      min-height: 100vh;
      text-align: center;
    }

    .grid >* {      /* the > notation in CSS selects the direct child of the parent element*/
      border-radius: 15px;
      border: 1px solid #444444;
      font-family: "courier new";
      padding: 10px;
    }

    .header { grid-area: header; }

    .nav { grid-area: nav; }
    .content {grid-area: content;}

    .footer { grid-area: footer; }

  </style>
</head>

<body>
  <div class = "grid">
    <div class = "header">header</div>
    <div class= "nav">nav</div>
    <div class = "content">content</div>
    <div class = "footer">footer</div>
  </div>
</body>

</html>

The above CSS grid example uses the grid-template-areas property to position content layout in specific locations on the page. CSS Grid specification allows other ways to position content, including the use of lines/tracks to place content into grid locations. The following four properties can be used to position content in specific columns & rows: 

grid-column-start: (VALUE(S));
grid-column-end: (VALUE(S));
grid-row-start: (VALUE(S));
grid-row-end: (VALUE(S));

For further information on CSS grid, review w3schools CSS Grid Layout Module or the resources at the bottom of this lesson.

Hide and Seek Menus

Have you ever wondered how those nice drop-down menus are created, where the menu items are revelead when you click or hover over some element? Wonder no more - CSS is the answer. In particular, use of the display property, which can have values of none (which makes elements invisible), inline, block, and inline-block, in combination with the hover pseudo-class, can make elements appear and dissaper when the user moves their mouse over some element.

View the source of this no CSS menu to see the initial code, with no CSS, and this full CSS menus to see how the same HTML code looks like when CSS is applied.

References