Grid Section

The Grid section allows you to display a grid of other content. You can control the number of columns, limit and sort order. Choose the card layout you want to use.


Grid Section 1 Screenshot Grid section displaying the “feature” content type using a 6 column grid and the default card layout.

Section Front-matter

- template: grid
    paddingTop: true # true/false
    paddingBottom: true # true/false
    borderTop: false # true/false
    borderBottom: false # true/false
    theme: base-offset # "base", "base-offset", "primary", "primary-offset" - Uses color variables from `data/themes.json` to theme the section
    classes: "" # "my-class my-class-2" - Add custom classes to the section div for custom CSS styling
  heading: Build Fast, Ship Fast
  contentType: features # "features", "partners", "posts" - The id of another content type. 
  sortBy: weight # "weight", "date" or any front-matter value - Sort the grid
  align: left # "left", "right", "center" - Align the grid
  columns: 6 # 1 to 12 - Grid is based on 12 columns. For example setting 6 columns would display 2 cards per row
  columnsMobile: 12 # 1 to 12 - Changes the column size for mobile viewport
  limit: 4 # 1 to X - Limits the number of cards shown
  card: # set the card style
    partial: "card" # "card", "card-row", "card-image-only" or any file from the `layouts/partials/cards/` folder - Choose the card layout template
    shadow: false # true/false - Add a shadow to the card
    border: false # true/false - Add a border to the card
    padding: true # true/false - Add or remove padding from card
    showThumbnail: true # true/false - Show/hide the thumbnail image
    showFooter: false # true/false - Show/hide the card footer with the "read more"
    showDate: false # true/false - Show/hide the contents publish date