An Introduction To CSS Grid Property
CSS Grid Properties
What is CSS Grid ?
CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.
Benefits of a CSS Grid
Thanks to its flexibility, a CSS grid allows web designers to achieve almost any type of layout that they need. It’s great for dividing up the major regions of a page into smaller sections or setting the relationship between elements in terms of size and position.
While it aligns page elements by columns and rows just like tables, the grid isn’t limited by a particular content structure. This makes it possible to create a wider variety of website layouts than would be practical with tables alone.
Grid Layout
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.
How to Use CSS Grid
if you want to set up a grid layout, you must create a parent div element(the grid container) and one or more child div elements (the grid items).
Setting the display property of an HTML element makes it a grid container.
Grid items are the direct children of the grid container. They are arranged vertically into columns and horizontally into rows.
The space between a row and a column is called a gap. You can adjust the gap using these properties:
- grid-column-gap, which defines the gap between columns;
- grid-row-gap, which defines the gap between rows; or
- grid-gap, which is a shorthand property for grid-column-gap and grid-row-gap
Grid Container
Create a grid container by setting the display property with a value of grid or inline-grid. All direct children of grid containers become grid items.
When learning the various parts of the Grid Layout specification, it’s useful to remember which features are for the grid container and which are for the grid items.
In this CSS Grid tutorial, I’ll first cover the properties you would apply to the grid container. These are as follows:
grid-template-rowsgrid-template-columnsgrid-template-area
Explicit Grid
Explicitly set a grid by creating columns and rows with the grid -template-columns and grid-template-rows properties.
A row track is created for each value specified for grid-template-rows. Track size values can be any non-negative, length value (px, %, em, etc.)
Items 1 and 2 have fixed heights of 50px and 100px.
Because only 2 row tracks were defined, heights of items 3 and 4 are defined by the contents of each.
Like rows, a column track is created for each value specified for grid-template-columns.
Items 4, 5 and 6 were placed on a new row track because only 3 column track sizes were defined; and because they were placed in column tracks 1, 2 and 3, their column sizes are equal to items 1, 2 and 3.
Grid items 1, 2 and 3 have fixed widths of 90px, 50px and 120px respectively.
#CSS #Grid #Design
