At TracSoft we are alway exploring new trends and what makes design more functional. A new idea we are starting to work with is used for making mobile styling easier with the CSS Grid. This is a purely visual tool that will have no effect on the communication of the content. To start working with CSS Grid, you need to set aside old habits and practices you have been using to create advanced CSS based layouts. In many cases, these established approaches are hacks developed to work around the limitations of CSS.
Using CSS Grid Layout
CSS Grid is an actual layout module within CSS rather than using CSS to create a layout.
The layout allows you to define the grid and place content within it, that can then behave as you want it to based on the grid section it is in, rather than manipulating the content to go where you want it to go.
You can basically place any element in any cell or combination of cells to create the looks that you want.
Applying Advanced Layouts and Functionality
With CSS Grid we will continue a mobile-first approach.
- Start with the smallest viewport
- Increase the width until things look strange
- Add a breakpoint
- Go back to step 2
In most cases, you would not change the single-column layout until the viewport’s width is fairly wide, so the first grid rule would usually appear in a media query. You’ll also find that most layouts require several grids — typically, one for the structural site-wide layout, and others for individual content models like archives, single posts and so on.
Working with Subgrid
If you are building things with grid and think, “it would be very handy if these child elements of a grid item could use the parent grid”. That is where you want sub grid.
You may be able to currently solve that issue with display:contents which is available in Firefox and in development in Chrome.
Would a subgrid locked to two dimensions work? Or do you need to ability to line things up in one dimension (column or row) and then have the content dictate the tracks in the other dimension?
These are thing still in question with CSS Grid.
CSS Grid Browser Support
All browsers will be enhanced over time and to give all browsers a well-functioning experience, all browsers will eventually have grid support for layouts.
Let us know what you think about CSS Grid and how you will be using it for design in 2018.