rose learns.to('code');

Learn more

M1D7: CSS

Table of contents

Display and Positioning: Z-index

The z-index CSS property can be used to specify the z-order of these overlapping elements. Overlapping elements with a larger z-index cover those with a smaller one.

I need to understand Z-index more. To watch:

Additional Topics on CSS

For more information on CSS background images, see the MDN documentation here.

For more information on CSS in general, you can see the excellent website CSS-Tricks.

CSS Grid and Flexbox

A CSS Grid is made up of rows and columns which are defined using the CSS properties grid-template-columns and grid-template-rows, which take as values the size of each track.

Grid Areas

The grid-area property specifies a particular area or set of rows and columns that a grid item occupies. It is applied to the grid item itself with CSS. Here is an example:

.item{
  grid-area: 1/2/3/3
}

Because grid-area is shorthand for the properties: grid-row-start, grid-column-start, grid-row-end and grid-column-end, the code above places the item from rows 1-3, and columns 2-3.

Crash Course

I liked this video among others I’ve seen:

The grid-area property defines the space an element takes up in the grid by setting values for the row it starts and ends in, and the column it starts and ends in. 

#one { 
    /* row start/column start/ row end/ column end */
    grid-area: 1/2/3/3;
  }

In this example the element with the id, one would start at the first row and the first column, and end at the third row (which is the end of the second row if there is no third row) and the third column.

The grid-area CSS property is a shorthand property for grid-row-start,grid-column-start, grid-row-endand grid-column-end, and it defines the area that an element occupies in a grid.

grid-template-areas is the property used to name the rows and columns of a grid and to set its layout. It could look like this:

 .container {
      display:grid;
      grid-template-columns: 300px 300px 300px;
      grid-template-rows: 250px 600px;
      grid-template-areas: 
      "hd hd hd hd hd hd hd hd"
      "sd sd sd main main main main main"
      "ft ft ft ft ft ft ft ft";
  }

The named areas in the grid are then assigned to each element according to where you want them to be displayed in the grid:

.header {
  grid-area: hd;
}

In the example above the element with the class header will stretch across the entire first row of columns because we have assigned it the grid-area hd, and we have defined the area hd with the value for grid-template-areas in the parent element.

There is so much flexibility with CSS grid! To learn even more about what you can do with grid-areas see the Complete Guide to Grid, from CSS-Tricks here.

Advanced Grid Recap

The fr unit represents a fraction of the available space in the grid container.

The repeat() notation can be used to quickly layout many tracks for large grids. For example:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Could be written with repeat notation like this:

grid-template-columns: repeat(7, 1fr);

The grid-auto-rows property can be used to generate the number of rows based on the content and available space. The following code:

grid-auto-rows: minmax(100px, auto);

Would create rows that are at least 100px tall and can be as tall as the content inside them demands.

Further Research

For even more control over how your content is laid out, check out this article titled How Items Flow Into a CSS Grid.

For more on Grid Layouts, see the below articles.

Media Queries

Media queries can be used for a variety of things and in a number of ways.

breakpoints – the viewport width at which we want our design to change.

We write the code inside that media query, with a set breakpoint, that we want to go into effect only when the viewport width that the app is being viewed on is at least the breakpoint width.

viewport – the area of the window in which web content can be seen. We use the dimensions of the viewport (usually the width, but sometimes the height) as the basis of our media queries.

Adding Media Queries in Code

Media queries are used to set different style rules for different devices or sized screens. We use breakpoints to set the condition of a media query. 

@<strong>media(feature:value)</strong>

@<strong>media(min-width:900px)</strong> {
  body{
   background:red;
 }
}

In this example if the viewport width is greater than 900px the background of the webpage would turn red.

Multiple Breakpoints

Creating 2 different breakpoints so that up to x width one set of CSS rules apply, then between x and y width a second set would apply, and then for anything beyond a width of y a third set of CSS rules would apply.

/* Anything smaller than first breakpoint 600px */
.container {
  // rules for small screen
}

/* Medium Screens */
@media (min-width: 600px) and (max-width:900px) {
  .container {
    // rules for medium-sized screen
  }
}

/* Large Screens */
@media (min-width:901px) {
  .container {
    // rules for large screen
  }
}

We use the keyword and to build a complex media query that evaluates both a min and max to create a range for the CSS rules to apply.

Complex media queries can be built using the keyword and to bound CSS rules between a range using min-width and max-width.

Further Research

See the MDN docs entry on using Media Queries.

Leave a Reply