This holds particularly true when it comes to CSS grid layouts, and there’s no shortage of frameworks deemed “the best, most lightweight to date”. Now we can make any kind of column combinations we want and provide them as options to our users.These days, there’s a framework for everything, and it seems that before we can even digest one, another one is released. The above markup combined with the above CSS results in the following grid demonstration: grid-column: span 6 will force that particular element to span six tracks (or fractions) of the available grid space horizontally. row would span exactly 1/12th of the available space (remember fractions), by explicitly defining grid-column spans on different grid column items we can adjust how much of the available fractions each one can take. For the actual grid column items we’re setting their grid-column property. the distance between our grid columns.Īnd that’s all for our grid container (the. grid-column-gap and grid-row-gap are setting horizontal and vertical gutters respectively, i.e. We’re basically saying that our field should be split into 12 tracks with each track spanning 1/12th of the whole available space. Think of our grid as a field of tracks, and each track is a unit of containment. We’re using the repeat function to create 12 columns each spanning 1 fraction (the new fr keyword introduced with CSS Grid means just that, a fraction of the total available space). The new grid-template-columns property defines line names and track sizing functions of our grid columns. The display property is set to grid, this is very similar to display: flex, it simply enables the Grid display mode.
CSS FOR RESPONSIVE COLUMNS IN WORDPRESS PAGE CODE
Let’s take a closer look at the code above. A simple listing templateĬreating a listing template is very simple within WordPress, we just need to make a new Page Template and loop through our content with WP_Query: That said, use cases vary wildly and the flexibility to give more options to our themes’ users is more important than puristic discussions. Keep in mind that although this is a perfectly valid usage of CSS Grid’s powers, it also might appear a bit anachronistic, since CSS Grid is by itself a grid framework and shouldn’t require generic markup. In this regard, it’s much more powerful than Flexbox and the difference with it is mainly about their scope: CSS Grid is meant for constructing and managing site-wide layouts (header, main content areas, sidebar, footer) and Flexbox more for component-level positioning (fine tuning alignment, element positioning, etc).Īs previously said, in this post we’ll focus on re-creating a reusable column grid solution (using generic HTML classes, much like Bootstrap or other grid frameworks do) which will aid us in providing column options in our WordPress listing templates. We’ve talked about CSS Grid in our previous tutorial “ Creating a simple WordPress blogging layout with CSS Grid and Flexbox“, and to sum up, CSS Grid is a new, powerful, and pragmatic solution CSS has to offer for authoring layouts. In our HTML and CSS, we create our grid using Flexbox (we actually use our own version of the Bootstrap grid) and in this tutorial we’ll see how we can easily create a “CSS Grid Framework” with none other than the shiny new CSS Grid! CSS Grid The figure above showcases how we lay out custom post types in a few of our most recent themes, Blockchain, Listee, and Løge. choosing in how many columns to split the cards each post is contained within.
Our main and most wanted option though is the column number setting, i.e. We use them extensively here at CSSIgniter with a lot of options like headings, animations, post meta visibility, and more. posts, pages, products, or any kind of other custom post types. Every type of content needs to be displayed somehow and listing templates are the norm when it comes to showcasing content that falls within the same family, i.e. Listing templates are every WordPress theme’s bread and butter.
0 kommentar(er)
