Grid Layout in Genesis

Show Featured Services Using CSS Grid in Genesis Sample

Recently, I wrote a tutorial on how to show flexible features widget in Genesis Sample.

This post does the same but uses CSS Grid layout instead of Genesis Classes.

So, lets’ get down to business.

Step #1: Register and Display a Custom Widget

Open your functions.php and add code to register a widget area. Then open your front-page.php or any other custom template file (where you may want to display it) and add the code to display it. Use the code given below.

https://gist.github.com/topleague/7174abac4966933e581d3582fafd086b

Step #2: Add Code for CSS Grid Layout

https://gist.github.com/topleague/0655b9f4550d5229b73ad8b2c74df70b

Step #3: Create Widgets and Add Text

https://gist.github.com/topleague/c6f9c83272844713c89de67daad8dd54

That’s it! Please, let me know if you have any questions.


Comments

3 responses to “Show Featured Services Using CSS Grid in Genesis Sample”

  1. Great tutorial! Thanks

    1. I’m glad you found it useful!

  2. Kawsar Siddik

    Always love to follow your genesis tutorials. Thank you very much. πŸ™‚