CSS Grid has taken off in the past year with the arrival of a complete implementation of the standard working in all 5 major browsers. CSS Grid is easy to learn and understand for 3 reasons. First, one can accomplish a lot with just a liitle code. Second, CSS users familiar with Flex layout will find the basic syntax similar to Flex; but CSS Grid adds a second dimension, rows with named lines and areas, which allows for some very attractive features. Third, most CSS Grid features are mobile responsive out of the box. So this review will examine how easy it is to use CSS Grid in WordPress by using CSS Grid to describe and display the CSS Grid test results.
How to Use CSS Grid in WordPress
Yes, there is a magic ingredient for effectively using CSS Grid in WordPress. It is the simple but powerful Code Embed plugin that allows users to embed CSS, JavaScript even HTML and PHP code in WordPress. Code Embed is versatile, allowing code embeds across all of a website’s Posts and Pages or code embeds added to a specific page or post as shown below:
Here we see the CSS Grid code we are using in this post:
It is fairly simple CSS. Make the display:grid , the grid-template-columns: 1fr 2fr 1fr , and the grid-gap: 10px 10px – and that is all the Grid CSS code we need. Of course we add some styling refinement with background color, text color and justification settings.
The grid-template-columns tells how the columns in the grid are to be formed. 1fr or one fractional unit tells how the columns are divided. The calculation is simple – add up the fractional units, in this case 4. So each fractional unit will get 1/4 of the rowspace. So for this grid there are 3 rows of 25%, 50% and 25% respectively. There are other grid-template-columns values such as auto and named columns which are discussed in detail here.
The final CSS Grid setting used here is grid-gap which specifies the gutter width. The first value is the column gutter width and the second is the row gutter width. I would like to specify the gutter color but it is not part of the CSS Grid spec yet.
The last part of the setting up for CSS Grid use is the HTML layout:
It look familiar – there is an outer container, <section class=”grid1″>, which contains the grid. Note instead of <section> we could have used any block HTML element such as <div> or <aside>. Inside the grid container we have three <div> blocks which contain an image of the Grid Css code, an image of the resulting output, and then a post of what was done and how it turned out. This cis the basic CSS Grid setup used for the grid display of images and text below.
Examples of CSS Grid for Image Display
For some WordPress owners and even developers, this use of CSS for a gallery layout is a stretch too far. But this example sets the stage for later, more sophisticated uses of CSS Grids. For HTML5 users already drawing on frameworks like Bootstrap 4 or Foundation Zurb 6, this use of CSS can simplify greatly their use of galleries and portfolio layouts. But watch below for some of the benefits of CSS Grids for image display.
Here we see output with 3 equal-sized columns using fr grid template code. Note the images have different heights. Also when viewed on a tablet or mobile phone both the images and text shrink to meet the new grid cells dimensions.
In this case the grid code is identically the same as before. But viewport is a tablet. And CSS Grid automatically shrinks both images and text to fit in the new sizing. This automatic mobile responsiveness of CSS Grid is very attractive.
To expand the number of columns to 4 to 5 is simple. Just change the grid template code to 1fr 1fr 1fr 1fre 1fr. And immediately the images are resized to fit the new grid layout. This is quite useful for quick product lists because each image can have an associated link.
In this last example we substitute auto for fr. Note it is hard to tell the difference between the two grid template code results.
The CSS Grid used just above combines images and text fields. However, it is possible to include other objects like audio, video, custom post types, animations – even shortcodes for sliders, charts and forms.
Summary
CSS Grid can be used for quick image display in gallery format . CSS Grid are automatically mobile responsive and easy to change the number of columns in each row. The gallery allows for different image heights and for CSS savvy developers CSS Grid is fairly easy to code and allows for a wealth of additional features and formating. The key to making CSS Grid work easily in WordPress is the Code Embed plugin which also is quite useful for inserting JavaScript and HTML code into individual Pages and Posts. And for HTML5 and JS Framework coders CSS Grid is a valuable alternative to the popular JS Framework grid systems. In sum, CSS Grid is a welcome addition to both the styling world and WordPress which makes for great opportunities for astute Web developers.