Grid Resource 1

CSS Tricks A Complete Guide to CSS grid is a great site that includes helpful information on terminology and properties that are needed in display:grid. Display grid defines an element as a grid container and creates a new grid formatting context for the given elements. There are two values of display:grid which include grid and inline-grid. Grid creates a block-level grid and inline-grid creates an inline-level grid.

Grid Resource 2

MDN also provides a great page all about CSS grid and provides helpful information about how grid works and provides examples. CSS grid layout is used to divide a page into regions or sections and uses size, position and layer to make the grid. There are some functions that are important in grids which include repeat,minmax and fit-content. Repeat is a CSS function that represents a reoeated section of a track list and allows the number of columns or rows to have a recurring pattern. Minmax is a CSS function that defines a given size that is larger than or equal to the minimum value and less than or equal to the maximum value. Lastly, fit-content is a function that attaches a specific size to the available size that is open based on a the formula: min(maximum size, max(minimum size, argument)).

Grid Resource 3

In order for a element to become a grid container it has to have the display property set to either grid or inline-grid. Which causes all direct children of the grid container to be grid items. Grids are broken up into columns which are the vertical lines and rows which are the horizontal lines. In grids there are also grid gaps which is the space between the columns/rows.

Summary

Grids are a great way to distribute information from the elements and create a better user experience for visitors to your site. Rather than reading a paragraph, grids provide a more interesting and better looking page.