CSS Grid

The CSS grid is a layout tool that builds upon previous advances made with flex-box. In the early days of the web the table tag was co-opted to use for layouts. This worked for a while, but in the modern age of the semantic web tables should only be used to display tabular data. Grid improves on Flexbox due to it being a two dimensional system that can control both columns and rows – Flexbox is largely one dimensional (CSS-Tricks, 2017).

Grid allows you to organise the CSS and HTML in any order using and using an ID you define the areas of the Grid. Grid works really well with media queries and allows different layouts based on screen sizes.

The grid needs a class applied to the external container. It is the display property of the class that creates the grid.

.grid {
   display: grid;  // Set as grid
   grid-template-rows: auto;  // Size of the rows (auto expands with contents)
   grid-gap: .5em;  // Tracks between grid cells

/* ----------- Phone Portrait ----------- */
@media screen and (max-width:400px) { 
 .grid {
   grid-template-columns: repeat(3, 1fr);  // Amount and sizing of columns
   grid-template-areas:  // Visual layout of the grid areas - these are named and applied by CSS class
   "hd hd hd"
   "as as as"
   "sA sA sA"
   "fe fe fe"
   "sf sf sf"
   "sB sB sB"
   "ia ib ic"
   "id ie if"
   "ft ft ft";


CSS-Tricks. (2017). A Complete Guide to Grid. [online] Available at: https://css-tricks.com/snippets/css/complete-guide-grid/ [Accessed 20 Dec. 2017].

Gridbyexample.com. (2017). Nested Grid. [online] Available at: https://gridbyexample.com/examples/example21/ [Accessed 14 Nov. 2017].


Please find all references here.

Leave a Reply