• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Block grid

    Block grid lets you display lists, <ul> or <ol>, in columns rather than the standard vertical list. In this example we have six list items which we want to display in three columns.

    On the <ul> tag add class="block-grid" and then set the number of columns as class="block-grid three-up"

    So that it displays nicely on a mobile device we will add another class to display in one column on phones.

    <ul class="block-grid three-up mobile-one-up">

    Number of columns

    The UQ Base theme is based on a 12 column grid and this applies to block-grid as well. Column options from one-up through to twelve-up are available, and the same applies for mobile-one-up through to mobile-twelve-up.

    Further information: http://foundation.zurb.com/docs/components/block_grid.html

    Previous (UQ News RSS feeds)Next (Demo form)