Do Box Me In.

Let’s talk about grids, baby.

Feature photo by rawpixel on Unsplash

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!

Terminology

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.

Image 1. Grid Tracks
Source: GridByExample

Grid Cell: the space between 4 grid lines. It’s the smallest unit on the grid. Basically a table cell.

Image 2. Grid Cell
Source: GridByExample

Grid Area: any area on the grid bound by four grid lines. It may contain a number of grid cells.

Image 3. Grid Area
Source: GridByExample

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.

Elements

All grid layouts consist of a parent element, that also contains a child element.

Image 4. Parent and Child Elements
Source: W3 Schools

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.

Flex Boxes

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.

Image 5. Flex Container
Source: CSS-TRICKS

Terminology (CSS-TRICKS)

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.
Image 6. CSS Display
Source: CSS-TRICKS

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.
Image 7. Flex-Direction
Source: CSS-TRICKS
Image 6. CSS Flex-Direction
Source: CSS-TRICKS
  • Flex-wrap: allow the items to wrap as needed to avoid flex items attempting to fit onto one line.
Image 8. Flex-Wrap
Source: CSS-TRICKS

Takeaways

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.

Helpful Articles

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s