Let’s talk about grids, baby.
To continue the CSS discussion, I’ll be providing a brief, but hopefully helpful, answer to the following questions:
What are grids? What are flex-boxes?
I’m just a student, learning as I go like most of you. I ask that if you are reading through this and notice any misconstrued information, please (politely) let me know and I will fix it!
Let’s go over some quick terminology. Courtesy of gridbyexample. All images are also from gridbyexample.
Grid Tracks: the space between two grid lines, either horizontal or vertical.
Grid Cell: the space between 4 grid lines. It’s the smallest unit on the grid. Basically a table cell.
Grid Area: any area on the grid bound by four grid lines. It may contain a number of grid cells.
Ok, what is a Grid?
Per Grid by Example, a CSS grid layout (only described in CSS and not HTML) is a layout method “designed for the two-dimensional layout of items on a webpage or application.” It contains rows and columns, as seen in the above photos. This method makes web page design easier, as it eliminates “floats and positioning” and is also able to adapt to different contexts and available spaces. There is no risk of overlapping since each element has an area on the grid. Although, unlike HTML table-based layouts, a designer is able to layer items o the grid, if need be.
All grid layouts consist of a parent element, that also contains a child element.
If you don’t know what parent and child elements are, allow Lorelle to explain. Similar to a human relationship, the parent element tells the child element what to do. It’s likely the child element will do what it’s supposed to; however, it depends on “inheritance.”
I know. What’s inheritance?
If child HTML elements are not specified, the child inherits the styles of the parent (the HTML tag). An example on Lorelle is if the “font-family is set in the <body> the paragraph HTML tag will inherit the same font unless specifically changed in the styles.”
If that doesn’t make sense, visit the article, it goes much more in-depth on the ins-and-outs than I can.
Similar to Grids, Flexboxes are intended to provide a more efficient way to layout and distribute space among items in a container, despite the possibility of the items inside the container having an unknown size (CSS-TRICKS).
In addition, Flexboxes are interoperable, which means they are able to work with other systems or products without special effort from the customer (SearchMicroservices).
It’s important to note that Flexboxes are most appropriate for small-scale layouts, whereas Grids are intended for larger scales.
Below I’ve included a graphic from CSS-Tricks that displays what a flex container looks like.
As to avoid completely plagiarizing CSS-Tricks, here is some terminology.
- Display: defines a flex container; inline or block depending on the given value. It enables flex context for its direct children.
Note: CSS columns do not effect a flex container.
- Flex-direction: establishes the main-axis, which defines the direction flex items are placed in the flex container.
- Flex-wrap: allow the items to wrap as needed to avoid flex items attempting to fit onto one line.
Main difference between Grid and Flex (Mozilla):
Flex: For smaller scale use; intended for one dimension, either a row or a column.
Grid: Larger scale use; two-dimensional layout — rows and columns at the same time.
I hope this brief article helps. I hope to update it as I learn more about this system.
I’d love any feedback on how to properly explain confusing systems to non-coders and designers.
- A Complete Guide to Flexbox
- CSS Grid Layout Module
- WordPress School: HTML and CSS Parent-Child Relationship
- Relationship of grid layout to other layout methods
- What is CSS Grid Layout?