Guide: CSS Grid Layout Module: Quick Guide
It once was tables, thereafter margins and floats, thereafter flexbox and now grid: CSS always steered towards new and better ways to accomplish the age-old task of coding of web layoutsThe CSS grid layout model can create and update the layout along two axes: horizontally and vertically, affect both width and height of elements. The grid layout doesn’t depend on the position of elements in the layout, so you can shuffle the placements of elements in layout without changing the layout. In the grid model is a grid container element divided into grid columns and rows (collectively known as grid tracks) by gridlinesNow let’s take a look how to create a sample grid
Browser support
At the time of writing this article, the CSS Grid Module is only supported by the latest IE browser and Edge. The CSS grid is in experimental phase in the other major browsers you should enable support manually
Firefox: Press Shift + F2, enter the following command in the GCLI input bar that appeared at the bottom of the browser: pref set layout.css.grid.enabled true. Chrome: Browse the chrome: // flags URL and enable Experimental Web Platform features
All major browser support is likely come by early / mid 2017
An example grid
To turn an element into a grid container you can use one of these three display properties Just as a table consists of multiple table cells, so is a grid consisting of multiple grid cellsA grid item is assigned to a set of grid cells known collectively as the grid area We are going to create a grid with five sections (grid areas): top, bottom, left, right and center. The HTML consists of five divs in a container div In the CSS, the grid-template-areas defines a grid with different grid areasIn its worth, a string represents a grid row and each valid name within a string represents a columnTo create an empty grid cell you need the period (.) sign within a row string. The grid area names referenced by the grid-area property of the individual grid items. .grid container {width: 500px; height: 500px; display: grid; grid-template-areas: “top top top” “left center right” “bottom bottom bottom”;}. grid-top {grid-area: top;}. grid-bottom {grid-area: bottom;}. grid-left {grid-area: left;}. grid-right {grid-area: right;}. grid-center {grid-area: center;} So this code creates a grid with three rows and columnsThe top item covers an area that extends three columns in the first row and spans the bottom item three columns in the last rowEach of the left, center, and right items takes a column in the middle row Now we have to assign dimensions to these rows and columns. The grid-template-columns and grid-template-rows properties define the size of the raster track (row or column). .grid container {width: 500px; height: 500px; display: grid; grid-template-areas: “top top top” “left center right” “bottom bottom bottom”; grid-template-columns: 100px auto 100px; grid -template rows: 50px auto 150px;} This is what our CSS grid looks like now (with some additional styles): IMAGE: The Grid
Space between grid items
You can add empty space between columns and rows using grid-column-gap and grid-row-gap, or their long-hand grid-gap property. .grid container {width: 500px; height: 500px; display: grid; grid-template-areas: “top top top” “left center right” “bottom bottom bottom”; grid-template-columns: 100px auto 100px; grid template rows: 50px auto 150px; grid-gap: 5px 5px;} Below you can see that the grid-gap property has indeed added gaps between the grid items. Image: grid with space between tracks
Align grid content and items
The justify-content property of the grid container (.grid container) aligns the content of the grid along the line axis (horizontal axis) and the align-content property aligns the content of a grid along the block axis (vertical axis)Both properties can have one of these values: beginning, end, middle, space-in-between, space-around and space-even. If applicable, the track size (row or column) shrinks to fit the content when aligned. View the screenshots of the grid content tuned to different values Below.
Both the justify content and the align content properties align the entire content within a grid To align individual items within their grid areas, use the different pair of alignment properties: justify items and align items. Both can have one of the following values: start, end, center, baseline (align items along the base grid line of the area), and stretch (items fill their entire area).
CSS Grid Layout Module: Quick Guide: benefits
Faq
Final note
I hope you like the guide CSS Grid Layout Module: Quick Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the CSS Grid Layout Module: Quick Guide, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “CSS Grid Layout Module: Quick Guide”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide CSS Grid Layout Module: Quick Guide, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
