resolves asciidoctor#326 add grid layout

examples/grid-layout.adoc

@@ -0,0 +1,100 @@
+= Grid Layout
+:docinfo: private
+:source-highlighter: highlight.js
+:highlightjs-languages: clojure,scala
+
+[.columns]
+== 2 columns
+
+[.column]
+--
+* **Edgar Allen Poe**
+* Sheri S. Tepper
+* Bill Bryson
+--
+
+[.column]
+--
+Edgar Allan Poe (/poʊ/; born Edgar Poe; January 19, 1809 – October 7, 1849) was an American writer, editor, and literary critic.
+--
+
+[.columns.wrap]
+== Multi-columns with wrap
+
+[.column]
+--
+.Kotlin
+[source,kotlin]
+----
+fun main() {
+    println("Hello, World!")
+}
+----
+--
+
+[.column]
+--
+.Clojure
+[source,clojure]
+----
+(defn -main [& args]
+  (println "Hello, World!"))
+----
+--
+
+[.column]
+--
+.Scala
+[source,scala]
+----
+object HelloWorld {
+  def main(args: Array[String]): Unit = {
+    println("Hello, world!")
+  }
+}
+----
+--
+
+[.columns]
+== Columns with size
+
+[.column.is-one-third]
+--
+* **Kotlin**
+* Java
+* Scala
+--
+
+[.column]
+--
+Programming language for Android, mobile cross-platform
+and web development, server-side, native,
+and data science. Open source forever Github.
+--
+
+[.columns]
+== 3 columns
+
+[.column]
+* Java
+* **Kotlin**
+
+[.column]
+* Node
+* **Deno**
+
+[.column]
+* Ruby
+* **Crystal**
+
+
+[.columns.is-half.green.left]
+== !
+
+[.column.is-half]
+* Java
+* **Kotlin**
+
+[.column.is-half]
+* Ruby
+* **Crystal**

templates/asciidoctor-compatibility.css

@@ -53,3 +53,70 @@ b.conum *{color:inherit!important}
 
 /* Override Asciidoctor CSS that causes issues with reveal.js features */
 .reveal .hljs table{border: 0}
+
+/* Columns layout */
+.columns .slide-content {
+  display: flex;
+}
+
+.columns.wrap .slide-content {
+  flex-wrap: wrap;
+}
+
+.columns .slide-content > .column {
+  display: block;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: .75rem;
+}
+
+.columns .slide-content > .column.is-full {
+  flex: none;
+  width: 100%;
+}
+
+.columns .slide-content > .column.is-four-fifths {
+  flex: none;
+  width: 80%;
+}
+
+.columns .slide-content > .column.is-three-quarters {
+  flex: none;
+  width: 75%;
+}
+
+.columns .slide-content > .column.is-two-thirds {
+  flex: none;
+  width: 66.6666%;
+}
+
+.columns .slide-content > .column.is-three-fifths {
+  flex: none;
+  width: 60%;
+}
+
+.columns .slide-content > .column.is-half {
+  flex: none;
+  width: 50%;
+}
+
+.columns .slide-content > .column.is-two-fifths {
+  flex: none;
+  width: 40%;
+}
+
+.columns .slide-content > .column.is-one-third {
+  flex: none;
+  width: 33.3333%;
+}
+
+.columns .slide-content > .column.is-one-quarter {
+  flex: none;
+  width: 25%;
+}
+
+.columns .slide-content > .column.is-one-fifth {
+  flex: none;
+  width: 20%;
+}

templates/section.html.slim

@@ -57,8 +57,9 @@
 
       - unless hide_title
         h2=section_title
-      - (blocks - vertical_slides).each do |block|
-        =block.convert
+      div.slide-content
+        - (blocks - vertical_slides).each do |block|
+          =block.convert
     - vertical_slides.each do |subsection|
       =subsection.convert
 
@@ -88,4 +89,5 @@
 
       - unless hide_title
         h2=section_title
-      =content.chomp
+      div.slide-content
+        =content.chomp