Column is a vertical structural elements which has some width and height. And in HTML structures, column is an essential common layout to make the grid layouts.
Configuration for Column
Column adepts it’s height from the base row or div, but width is the main selection for it. Just select width and start putting structures in it.
Gutenberg gives multiple ways to add Column into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Column after “/” sign, eg.“/Column”, in the content area. Gutenberg also provides drag & drop after opening the list of widgets panel.
After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
Select width of column in here. I prefer % over px.
Enabling full width will make element stretched 100% in horizontal direction into it’s base container.
Alignment of component into left, centre or right direction.
The Style tab is used for customising the appearance of all the Column widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
Apply suitable background like color/ gradient / image to an element.
Draw a border around the element and give width and color to it.
Set the radius curve of the element’s corner.
Give Box/Text/Drop shadow effect and color to an element.