CSS Grid Layout is shaping up to be the layout tool we’ve always wanted
on the web. How can we use it to start creating interestinglayouts?
I couldn’t be more excited about CSS grid layout. For far too many years
we’ve been dealing with CSS solutions that were never made for the
layouts we have been creating. Working with tables then floats and
positioning have conditioned us to avoid anything outside of these
standard patterns we’ve come to settle upon. But designers and CSS
developers can soon rejoice when the CSS Grid Layout Module hitsbrowsers.
In the meantime, Flexbox has been a great addition to our CSS Toolbox,
giving us a way to lay content out easier than before. Remember when
vertical centering used to be a huge ordeal? There are a number of
issues that are “Solved by Flexbox,” but it is still not a complete
gridsolution.
If you haven’t used Flexbox yet, I highly suggest studying this CodePendemo:
Flexbox is great for single direction elements but lacks the ability to
create structure on both x and y axis’. A container with display: flex; can either go horizontally or
vertically as selected by the flex-directionproperty.
Well, CSS Grid Layout is in the far distant future. It doesn’t have much
browser support at the moment so if you want to use it on a production
site you may want to use Feature Queries. By wrapping your code in an
@supports conditional, it will check to see if the browser has support
for the property/value pair in the parentheses, and if so, will use what
is inside the @supports brackets. If the browser doesn’t have support
for display: grid or if the browser
doesn’t even know what Feature Queries are, then it ignores the block ofcode.
Currently, Feature Queries are supported in most browsers except
Internet Explorer and OperaMini:
Grid Introduces NewVocabulary
Grid line
The lines that create the grid, separating the gridcells.
Grid track
The horizontal or vertical space between two grid lines, often spanning
multiple gridcells.
Grid cell
A single unit of the grid made from the space between four gridlines.
Grid area
A group of space between four grid lines, often containing a group of
grid cells. Grid areas can be named inCSS.
Grid-specific CSS Properties
Over the next few months we will be writing more about CSS Grid Layout.
In the meantime, CSS-Tricks posted a guide from Chris House
that explains each of the below properties in greatdetail.
CSS Grid Layout Properties to use on a GridContainer:
display
grid-template-columns
grid-template-rows
grid-template-areas
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
CSS Grid Layout Properties to use on a GridItem:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
I’ve been creating a few demos in CodePen using Grid and it has been
exciting to see the flexibility we will have once this rolls out. I
encourage you to start experimenting on your own aswell.
In the CodePen demo below, you’ll see we start with floats then wrap
everything else in @supports ( display: flex ) {} or
@supports ( display: grid ) {}. Within the first Flexbox conditional,
we over-write the float, max-width, and clearing properties we defined
for the olderbrowsers.
What types of layouts can we create with this more flexible system? I
would love for some very experimental design to start taking place. I
can hear the sighs from usability experts everywhere so let me be clear,
I am not saying that we need to create crazy, chaotic designs with
unpredictable navigation patterns. I am only asking how we can explore
and create new ways to layout out content that are still intuitive but
perhaps different from what we’ve always done in thepast.
There have been a number of wonderful conference talks from CSS Grid
advocates including Rachel Andrew, Christopher Wright and Jen Simmons
demonstrating the how, why and what is possible when it comes to
CSS Grid Layout. If you have any resources to share with us, we’d love
to hear from you,too!
Taking Layout to the Next Level, by ChrisopherWright
Learn how to leverage Web Platform Tests to ensure your polyfills are implementing upcoming browser features correctly, including how to generate a comprehensive report of failing/passing tests on each change.
OddBird sponsored Python Web Conference 2023 and sent me to attend. In this article I showcase my favorite talks and activities from this excellent online event, including a list of useful resources for web application security, introductions to new PaaS providers, and a comparison of the most popular Python web frameworks.