Code 201 Class 8 Reading Notes

Learn CSS Layout

Grid

Grid is designed to control multi-axis layouts instead of single-axis layouts (vertical or horizontal space).

Grid enables you to write ___ rules on an element that has display: grid, and introduces a few new primitives for layout styling, such as the repeat() and minmax() functions. One useful grid unit is the fr unit-which is a fraction of remaining space-you can build traditional 12 column grids, with a gap between each item, with 3 CSS properties:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

Layout from HTML/CSS Book

Screen Sizes

Different visitors to your site will have different sized screens that show different amounts of information, so your design needs to be able to work on a range of different sized screens.

Screen Resolution

Resolution refers to the number of dots a screen shows per inch. Some devices have a higher resolution than desktop computers and more operationg systems allow users to adjust the resolution of their screens.

Page sizes

Because screen sizes and display resolultions vary so much, web designers often try to create pages of around 960-1000 pixels wide (since most users will be able to see desing sthis wide on their screens).

Fixed Width Layouts

Fixed width layout designs do not change size as the user increases or decreases the size of their browser winder. Measurements tend to be given in pixes.

Liquid Layouts

Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages.

<—BACK