“After playing around with Grid for a bit, I realized my approach to designing layouts had changed. Smashing Magazine's Chen Hui Jing describes her experiences coming to grips with Grid as a revelation in simplicity. You might also like: What is Progressive Enhancement and Why Should You Care? Thinking inside the gridĬSS Grid is considered a very significant advancement by the web design community and is especially helpful for graphic designers, who may sketch out page layouts in terms of rows and columns, since this kind of “blueprint” logic is what CSS Grid achieves.
In this post, we’ll look at how some of these new properties can be employed on Shopify themes to create dynamic new structures for your clients. Pages using Grid generally tend to have “cleaner” HTML too, since many of the more convoluted methods for positioning (looking at you, clearfix) are avoided.ĬSS Grid introduces a range of new styling properties, which can be used to determine cell sizes, item placement, alignment control, and more. Grid’s component-based model for grouping and laying out page elements allows for full page responsiveness without using complex CSS, which is especially important in a world that is increasingly mobile-first and performance-aware. At its most basic, Grid allows developers to define columns and rows on a page, as well as place elements within cells, or groups of cells.
Now that all modern browsers support CSS Grid, developers have the perfect opportunity to experiment with Grid on Shopify themes.įor those new to CSS Grid, it is a relatively recent addition to web development that makes working with page layouts more intuitive and dynamic. One of the hot topics in front end development this past year has been the addition of a new layout system called CSS Grid. To learn more about how to build with Online Store 2.0, visit our updated documentation. While the information in the following article is still correct, it doesn't account for Online Store 2.0 best practices, and may not include references to recent features or functionality. Online Store 2.0 is an end-to-end overhaul of how themes are built at Shopify, launched June 2021.
0 kommentar(er)
