For this weeks class we looked at CSS grid layouts.
A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create layouts in which our elements won't jump around or change width as we move from page to page, providing greater consistency on our websites.
CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles or run other code based on those things. Perhaps the most common media queries in the world are those that target particular viewport ranges and apply custom styles, which birthed the whole idea of responsive design.
Every website is accessed through devices with different screen sizes and resolutions. The software has to render correctly on every screen size. Images can’t be distorted or cut out. Developers therefore need to use CSS breakpoints. These are points defined in the code. Website content responds to these points and adjusts itself to the screen size to display the accurate layout.
A grid will typically have columns, rows, and then gaps between each row and column. The gaps are commonly referred to as gutters.
<aside> <img src="/icons/code_pink.svg" alt="/icons/code_pink.svg" width="40px" /> <link rel="stylesheet" media="(max-width: 800px)" href="tablet.css" />
</aside>
Kerning is how far letters are spaced from each other, We can add in kerning into a CSS file to space out are type.
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
In this exercise Paul emailed us two images. We then had to insert a grid image code into our CSS file.
