Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 43

Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 49
Block: Columns – SmashingCoding Lab

Block: Columns


This page tests how the theme displays the columns block. The first block tests a two column block with paragraphs.

This is the second column. It should align next to the first column. Reduce the browser window width to test the responsiveness.

This is the second column block. It has 3 columns.

Paragraph 2 is in the middle.

Paragraph 3 is in the last column.

The third column block has 4 columns. Make sure that all the text is visible and that it is not cut off.

Now the columns are getting narrower.

The margins between the columns should be wide enough,

so that the content of the columns does not run into or overlap each other.

Column one.

Column two.

Column three.

Column four.

Column five.

To change the number of columns, select the column block to open the settings panel. You can show up to 6 columns. If the theme has support for wide align, you can also set the alignments to wide and full width.

Below is a column block with six columns, and no alignment:

Column one.

Column two.

Column three.

Column four.

Column five.

Column six.

Next is a 3 column block, with a wide alignment:

Column one.

Column two.

Column three.

And here is a two column block with full width, and a longer text. Make sure that the text wraps correctly.

This is column one. Sometimes, you may want to use columns to display a larger text, so, lets add some more words. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna. Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.

Column two. Cras volutpat, lacus quis semper pharetra, nisi enim dignissim est, et sollicitudin quam ipsum vel mi. Sed commodo urna ac urna. Nullam eu tortor. Curabitur sodales scelerisque magna. Donec ultricies tristique pede. Nullam libero. Nam sollicitudin felis vel metus. Nullam posuere molestie metus. Nullam molestie, nunc id suscipit rhoncus, felis mi vulputate lacus, a ultrices tortor dolor eget augue. Aenean ultricies felis ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse placerat tellus ac nulla. Proin adipiscing sem ac risus. Maecenas nisi. Cras semper.

We can also add blocks inside columns:

  1. This is a numbered list,
  2. inside a 3 column block
  3. with a wide alignment.

The middle column has a paragraph with an image block below.

canola
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna.

-This third column has a quote

Theme Reviewer

But wait there is more!  We also have a block called Media & Text, which is a two column block that helps you display media and text content next to each other, without having to first setup a column block:

dsc20050813_115856_52

Media & Text

A paragraph block sits ready to be used, below your headline.


27 responses to “Block: Columns”

  1. Dr. Elroy Yundt Avatar

    Sit sit quidem perferendis ut. Quasi sapiente accusantium sit aut dolores pariatur ut. Omnis quaerat cumque omnis perspiciatis dolorem rerum laborum consequatur. Aut facere reiciendis ad accusantium eligendi. Qui est et id debitis qui rerum ut. Id sapiente repellendus hic enim ut. Deleniti at ut quia necessitatibus ad quia error saepe. Qui iusto placeat quae totam. Totam repudiandae eligendi autem sit unde ut. Dolore voluptate et sed assumenda voluptatum. Nam modi quasi doloribus voluptatibus. Eos dolores expedita est quod et omnis. Perferendis rerum dolores consequatur facere qui beatae repellat. Cum sunt sunt ea in veniam dolorum voluptas. Illum quam et voluptatem quis consectetur. Beatae et voluptatem reprehenderit ipsum consequatur incidunt.

    Dolorum aliquam est nisi. Laudantium voluptates et iusto laboriosam tenetur autem et corrupti

    Vitae excepturi totam esse iste fugiat consectetur quis. Ut saepe dignissimos quaerat. Temporibus voluptates et velit eum Quasi sapiente ab nam et. Fugit quod quos officiis ullam sit voluptates. Aperiam ab dolore eos nisi aut Sed sunt voluptatem et deleniti. Eius sunt deleniti deserunt voluptatum. Aliquid aliquid rerum fugiat iusto voluptas. Voluptas nesciunt esse error Autem consequatur voluptatibus temporibus esse sit neque. Iste dolores quos odit ipsam possimus enim. iusto perferendis molestiae aliquam perspiciatis quis. sunt atque nesciunt Quam molestias impedit non enim repudiandae. Facilis nemo ipsum. Occaecati dolores esse et sint.

    • Aliquid id in sequi ex
    • Aut perferendis
    • Harum
    • Quisquam expedita
    • Non est sint sint
    • Sunt sed maxime totam pariatur laudantium
    • Omnis eveniet eos
    • Molestiae fuga aut
  2. Rosanna Kirlin IV Avatar
    • Dolores
    • Distinctio qui et
    • Inventore sed et facere
    • Ab fugiat voluptas ex nulla quasi
    • Qui quos autem quia dolor
    • Ut
    • Rerum quas reprehenderit non
  3. Jolie Adams Avatar

    Qui et tempore sint sed debitis cumque. Dolores vel eveniet Corrupti delectus voluptatem id ut. Optio totam officiis eveniet labore est.

    Sit aut est a laboriosam. Ut autem exercitationem ullam omnis fugit iure sed commodi. Nisi aliquid repudiandae est et. Tempore voluptas omnis facere corrupti. Aut deserunt molestiae omnis

    • Ea aut qui eos rerum ut
    Iure eius a reiciendis commodi magnam et aliquid. Voluptas repellendus iure consectetur animi. Saepe ut rerum magnam laudantium est

    Iste non dolor voluptas fugiat error. Quo et sunt quia. placeat repellendus Aut impedit minus laudantium. Et asperiores sit tempora excepturi magnam Ut doloremque aut magnam soluta repudiandae. quia eum temporibus exercitationem repellat. Temporibus modi beatae et minus sequi et. voluptate vel facere. Eligendi occaecati repudiandae dolorum velit ullam et quia. voluptatem ab non in. temporibus ut quaerat velit laborum Saepe rem ut rerum facilis totam. tenetur delectus eos Similique reiciendis excepturi et deleniti. Qui doloremque molestiae ut laborum. reiciendis qui alias excepturi minus molestias. Vitae officiis a expedita sit animi Quis architecto accusamus qui commodi.

  4. Deon Raynor Avatar

    Quasi et ducimus tempora nostrum. Dolorem explicabo aliquid id ea omnis tempore

    Atque debitis rerum quibusdam quam ullam voluptate distinctio accusantium. Dignissimos cumque aliquam eum cumque occaecati tenetur. Omnis et voluptatem voluptatem sed qui aut. Necessitatibus sint quo fugit et sed. Nobis recusandae illum qui qui ut quae.

    Et quisquam officia quo omnis aperiam necessitatibus et et. Sit maiores qui ab quas
    1. Minima illum quo
    2. Animi dolorum vel magnam modi hic temporibus
    3. Fugiat sit enim
    4. Sint qui eaque distinctio sit
    5. Et officia
    6. Consequatur
    7. Voluptates nihil illo aut eos
    8. Modi quaerat sit dicta
    9. Et et sunt eos vero neque
  5. Gideon Harvey Avatar

    Necessitatibus et magni quis fuga in. Dolorum tempore maiores ut cum illum suscipit

    Dolorem maiores numquam eligendi et exercitationem Error hic minus Ipsum optio quae et qui eos rerum nihil. voluptatum rerum quia. Rem ipsum perspiciatis rerum eos quod id. Qui assumenda quis repellendus. quo dolores illo. Autem voluptatem ea cumque nihil at ex Dolor et numquam magnam Atque doloremque ipsam velit eum. Itaque et id Magnam perspiciatis est assumenda recusandae non. Unde labore ut sit sunt laudantium. Qui sit molestiae non. consequatur dolorem et accusantium. Numquam corrupti ea atque sapiente. Aut beatae qui cupiditate reprehenderit. Vero dolorum dignissimos voluptatem ut voluptas reiciendis Nihil consequatur et fuga. Nostrum omnis accusantium quasi optio. Dolorem voluptatum et ullam exercitationem nisi ad. Voluptatem molestias minus omnis sed.

    • Rem magni rerum totam alias
    • Facere
    • Cupiditate aut est voluptatem totam est
    • Ut nulla voluptas quasi autem
    • Pariatur

Leave a Reply

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