A

Advanced Classy Layouts (Part 3): Auto-Width Column Grid Layouts

*This post is part of a series. Please check out Advanced Classy Layout Templates to get the full context for this post.

**This post and the available download requires a working knowledge of HTML/CSS. Need to brush up on your skills? Check out w3schools.com to learn the basics for HTML/CSS.


The auto-width column grid layouts are the simplest to program. Use this type of layout when you want all the columns in a row to be the same width. It doesn’t matter if you have two columns or twelve, this template will automatically adjust the column widths to match the number of columns you tell it the layout should have. 

Let’s take a look at the HTML code for this section:

AUTO-WIDTH COLUMN GRID HTML CODE 

<div class="grid-container text-center">
    <div class="grid-item">
      <h3 class="pb-2">Section Title</h3>
      <p class="font-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac posuere neque, vitae condimentum libero. Maecenas a pellentesque magna.</p>
      <p><a rel="nofollow" style="margin-bottom:60px;"  href="#" class="btn btn-primary"style="padding-top:15px;padding-bottom:15px;">Customizable Button</a></p> <!-- This is how to add a button. -->
    </div>
    <div class="grid-item">
        <h3 class="pb-2">Section Title</h3>
        <p class="font-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac posuere neque, vitae condimentum libero. Maecenas a pellentesque magna.</p>
        <p><a rel="nofollow" style="margin-bottom:60px;"  href="#" class="btn btn-primary"style="padding-top:15px;padding-bottom:15px;">Customizable Button</a></p> <!-- This is how to add a button. -->
    </div>
    <div class="grid-item">
        <h3 class="pb-2">Section Title</h3>
        <p class="font-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac posuere neque, vitae condimentum libero. Maecenas a pellentesque magna.</p>
    </div>
    <div class="grid-item">
        <h3 class="pb-2">Section Title</h3>
        <p class="font-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac posuere neque, vitae condimentum libero. Maecenas a pellentesque magna.</p>
    </div>
</div>

In the code, you’ll notice that there is one big “grid-container” div with several smaller “grid-item” divs inside of it. This is the foundation for the grid system’s rows and columns. The “grid-container” is the whole row, and the “grid-items” are the items that end up in each column. 

Down in the CSS is where the number of columns is defined, under the “grid-template-columns:” property of the “grid-container” class. This template is set up to use the “auto” setting for the columns, meaning that all the columns you define will be the same width. If you want one column to be larger than another, check out this post on Fraction-Based Layouts. Here’s an example of where the number of columns in a container is defined:

So, what you do is you set up the parent container, add items inside it, then tell the parent container how many columns you want to display in the CSS. The number of times you list the word “auto” is the number of columns your layout will have. So if you update it to “grid-template-columns: auto auto;” the layout will have two columns. Typing “auto auto auto” would get you a three column layout, and so forth.

AUTO-WIDTH COLUMN GRID CSS CODE 

Here’s the full CSS block, including several “@media” breakpoints that adjust the styles for various screen sizes. Notice how the padding on the grid-container class changes for each breakpoint. 

To modify the number columns in a row at various screen sizes, modify the “grid-container” class at each “@media” breakpoint. This allows you to force the page into less columns on smaller screen sizes. Often the smallest mobile phone view is just a single column.

In the CSS, you’ll see I’ve broken up the styles into sections for:

  • Button design
  • Text formatting
  • Layout styles for adjusting the content for a background image, if necessary
  • Responsive grid layout styles
  • Vertical Padding default classes
/* Web-Button Styles */
.btn {margin:1em 0 60px 0;text-decoration:none;text-transform: uppercase;}
 a.btn {color:#fff;}
 a.btn:hover {color:#fff;}
 .btn-primary {background:#62b1bd;border:0px solid #fff;border-radius:0;font-size:1.25em;padding:0.5em 2em;}
 .btn-primary:hover {background:#202945;border:0px solid #fff;border-radius:0;font-size:1.25em;padding:0.5em 2em;}
​
/* Text-and-Layout Formatting Options */
 h1,h2,h3,h4,h5,h6,p {font-family:Arial, Helvetica, sans-serif;}
 .text-center {text-align: center;}
 .text-white {color:#fff;}
 .underline {text-decoration:underline;}
 .text-center img{margin-left:auto;margin-right:auto;display: flex;align-content: center;}
 .font-20 {font-size:20px;}
 .font-30 {font-size:30px;}
 h1 {font-size: 3em;line-height: 1.5em;font-weight: bold;color: #fff;}
 h2 {font-size: 1.75em;line-height: 1.5em;color: #fff;}
​
/* ----- Layout Styles ----- */
/* Page Hero */
 .bg-img {padding: 45% 5% 2% 5%;background-size:cover;background-position: center top;}
 @media only screen and (min-width: 600px) {
 .bg-img {padding: 10% 5% 2% 5%;background-size:cover;background-position: center top;}
 }
​
/* Rows/Columns */
 .grid-container {align-items: start;}
/* For mobile phones: */
 .grid-container {display: grid;grid-template-columns: auto;padding: 2% 5% 0 5%;}
 .grid-item {padding: 0 5%;}
 .grid-item img {margin-left:auto;margin-right:auto;width:100%;}
 /* For tablets: */
 @media only screen and (min-width: 600px) {
 .grid-container {display: grid;grid-template-columns: auto;padding: 0 5%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 /* For desktop: */
 @media only screen and (min-width: 900px) {
 .grid-container {display: grid;grid-template-columns: auto;padding: 0% 10%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 @media only screen and (min-width: 1024px) {
 .grid-container {display: grid;grid-template-columns: auto auto;padding: 0% 10%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 @media only screen and (min-width: 1400px) {
 .grid-container {display: grid;grid-template-columns: auto auto;padding: 0% 15%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
/* General */
 .clearfix {clear:both;}
​
/* Padding options (increments of 10px, from 10px to 60px). Class names match Bootstrap classes. */
/* Padding Top */
 .pt-1 {padding-top:10px;}.pt-2 {padding-top:20px;}.pt-3 {padding-top:30px;}.pt-4 {padding-top:40px;}.pt-5 {padding-top:50px;}.pt-6 {padding-top:60px;}
/*Padding Bottom */
 .pb-1 {padding-bottom:10px;}.pb-2 {padding-bottom:20px;}.pb-3 {padding-bottom:30px;}.pb-4 {padding-bottom:40px;}.pb-5 {padding-bottom:50px;}.pb-6 {padding-bottom:60px;}
/* Padding Y axis */
.py-1 {padding-top:10px;padding-bottom:10px;}.py-2 {padding-top:20px;padding-bottom:20px;}.py-3 { padding-top:30px; padding-bottom:30px;}.py-4 { padding-top:40px; padding-bottom:40px;}.py-5 {padding-top:50px; padding-bottom:50px;}.py-6 { padding-top:60px; padding-bottom:60px;}

The vertical padding options are a quick way you can add spacing around an element by adding a simple class to a tag. You’ll notice “pt, pb, and py” which mimic the Bootstrap class names for padding-top, padding-bottom, and padding on the vertical y axis (both top and bottom). These allow you to quickly add incremental spacing to elements within the layout, for refining the spacing around elements as needed.

DOWNLOAD THE TEMPLATE

Are you ready to get started? Subscribe today to get your free Classy custom code block templates. When you sign up to receive updates, I’ll also send you my Classy Background Image Safe Zone Templates as well.

USING THE TEMPLATE

Once you download the template, you’re ready to start planning your page. If the page will have complex content, or you’ve never built a custom code block before, I recommend starting with a wireframe to plan the content for your page. You can learn more about how to do that in my blog titled Laying It All Out.

Now that you have a plan for how you want to lay out the content on the page. Let’s dive into setting up the template:

  1. Open the HTML/CSS template in a code editing software like Visual Studio Code or a plain text editor like Notepad.
  2. Open a Classy Peer-to-Peer campaign, Event, or Crowdfunding campaign and navigate to the page editor section of the campaign
  3. Select the landing page of your campaign (Don’t forget, there are limitations to where you can use custom code blocks on donation pages, thank you pages, and team or individual fundraising pages. Learn more here.)
  4. Select the Design tab on the right, and scroll down to click the “ADD CONTENT TO PAGE” dropdown on the left
  5. Select the “</> Custom” block type and drag it into place on the page layout list on the left
  6. Open the HTML/CSS template in your code editor and copy and paste the sections labeled <!– HTML CODE –> and <!– CSS STYLES –> into the HTML and CSS tabs of your new custom code block.
  7. (Optional) If you want to add a background image or background color to the section, scroll down to the “UPLOAD BACKGROUND IMAGE” button on the left in order to add an image to the background of your custom block. You’ll have to add any blur to the background image by editing it in a tool like Photoshop, but the Custom code blocks do allow you to change the opacity of the image (to darken or lighten it with a background color) and change the image position settings. For a parallax type of effect, select Cover & Fixed as the image position.  

You may notice that the page preview appears funny if the CSS styles have not been added. Sometimes the preview version of the page doesn’t look exactly like it will look on the live page anyway, so I recommend opening the page in a new tab and refreshing it to see any updates you save. 

Speaking of which, save the page now and open the landing page in a new tab to see if the template has been added properly. 

To modify the code, either edit the code in your code-editing software on your computer, copying and pasting the updates into Classy, or edit the code in Classy directly. I recommend making a copy of the original files each time to modify them for a new campaign, that way the original files always remain intact, and you can delete the copy and start over if you accidentally break something in the code.

Learn more about the CSS Grid System here: https://www.w3schools.com/css/css_grid.asp

Leave a Reply

Your email address will not be published. Required fields are marked *