This is a reference post to create multi-layout columns using the different CSS methods and hacks.
The simplest way to create multiple columns is to define each sub-container a width which should not be more than the total 100%.
Example:-
HTML
<div class="conatiner"> <div class="sub-conatiner first">Hello</div> <div class="sub-conatiner"> World!</div> </div>
CSS
.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner.first {
width: 50%;
}
.sub-conatiner {
width: 50%;
float: left;
}
or simply define it as this
.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner {
float: left;
width: 50%;
width: calc(100% / 2);
}
Now if I will add a border, the content will not in column because the width exccessed. We need to lower the width to add padding, margin or borders.
.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner.first {
width: 70%;
}
.sub-conatiner {
width: 20%;
float: left;
border: 1px solid red;
margin-left: 10px;
}
or like this
.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner {
float: left;
border: 1px solid red;
margin-left: 10px;
width: 45%;
width: calc(90% / 2);
}
width: 50%; and width: calc(100% / 2); works great when we want equal columns but not when we want sub container to be of different width.
Create multi-layout columns in Genesis
Create multiple columns is not difficult as we can define each sub-container a different width where the total width not will be more than width: 100%;
The CSS works same for every site. Genesis child themes include most popular configuration by default. You can copy each width HTML and work on the same.
You can take the help of the Genesis columns advanced article where I have added the HTML classes which the Genesis columns advanced plugin outputs which is similar to what the default child themes have.
Alternatively, You can try Column Shortcodes plugin or copy the HTML and CSS to use it on your site.
Bill Erickson has a Column Class Generator which is really useful in some cases.
These are the basic methods to create multi-layout columns. The advanced columns can be created using CSS Columns, CSS Flexbox and CSS Grid.
I have written the reference post on CSS Flexbox in Genesis and CSS Grid in Genesis which will give an idea of working with flexible layouts.
Go and explore the Advance Columns and Make them Equal heights. Here are some of the resources for advanced users.
Resources:-
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts
https://css-tricks.com/almanac/properties/c/columns/
https://www.sitepoint.com/css-multi-column-layout-tutorial-for-beginners/