Menu
Is there a way in HTML5/CSS to have the columns layed out as shown below, and still have the text flow correctly?
###### ######
# C1 # # C2 #
# # # #
###### ######
###### ######
# C3 # # C4 #
# # # #
###### ######
###### ######
# C5 # # C6 #
# # # #
###### ######
Just to clarify - I want to be able to write all the text within a single element and have the CSS create the columns.
473
Write a basic HTML template using these files. Once everything is set up, create a simple 'container' div inside <body> tag. Inside the 'container', create another div with class 'row' and as the name suggests, we are creating a row for handling columns. Populate the 'row' div with 5 divs with class 'col'.
An HTML column is defined in the <div> tag using the class = "column" keyword. More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added.
We can create columns by creating a grid container using display: grid . To add three columns use grid-template-columns. Specify the width of each column separated by white space. So we can add variable-width layout using grid property.
Although this uses one single element, but the breaks must be manually defined.
Use the column-span property and use an element such as <br /> to define the vertical breakpoints. The content will look and render approximately as:
<p>
CSS3 multi
<br/>
columns are
<br />
just awesome.
</p>
CSS3 | multi
-----------------
columns | are
-----------------
just | awesome
CSS looks like:
p {
column-count: 2;
column-rule: 1em solid black;
}
br {
column-span: all;
}
Add browser specific prefixes (-webkit, -moz) accordingly. column-span may not be supported by any browsers as of today. See this article for details. Here's my feeble attempt that didn't work on Chrome.
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
