Tag Archives: CSS Grid

M1D16: Codeacademy | CSS Grid Layout

Posted on January 30, 2023 by Rose

Introduction to Grids Using CSS, you can elegantly lay out elements on a web page. The Box Model and Display and Positioning explain some possible ways to style layout. The grid can be used to layout entire web pages. Whereas Flexbox is mostly useful for positioning items in … Continue reading →

Posted in 6-Month Journey, Study Notes | Tagged , , | 1 Comment

CSS Grid Cheatsheet – Codeacademy

Posted on January 30, 2023 by Rose

Grid Template Columns To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value … Continue reading →

Posted in Study Notes | Tagged , , | Leave a comment

M1D15: CSS Grid Layout Part 4

Posted on January 29, 2023 by Rose

Negative Grid Lines and Shorthand Syntax Grid lines also have negative indexes. You can reference grid lines starting from the far right or bottom edges of the grid, using negative line numbers. In this video, you’ll more line placement tips … Continue reading →

Posted in Study Notes | Tagged , , | 1 Comment

M1D14: CSS Grid Layout Part 3

Posted on January 26, 2023 by Rose

Firefox Grid Inspector Tool Position Items by Grid Lines CSS Grid lets you exercise even greater control by specifying the placement of individual grid items. You can use grid line numbers to control how items are placed, by applying properties … Continue reading →

Posted in 6-Month Journey, Study Notes | Tagged , , | Leave a comment

M1D13: CSS Grid Layout Part 2

Posted on January 26, 2023 by Rose

fr – fraction unit, a flexible length unit designed for creating grid tracks that expand and contract based on the free space in the grid. auto – can expand a column to fill up extra space. It sizes items based … Continue reading →

Posted in 6-Month Journey, Study Notes | Tagged , , | 1 Comment