How to align text in CSS where both columns are straight?

Last Updated : 29 Apr, 2021

Introduction: To align text in CSS there are lots of options available. Basically columns are straight always in CSS or in HTML, but here the columns are straight means that the gap between columns and the number of lines in each column should be equal.

Approach: In CSS each column act as a box, so how alignment works and controlled is totally depend on the Box-alignment module, this module aims to create a consistent method of alignment across all of CSS. So by using the Box-alignment modules property we can align the text where two or more than two columns are straight. By using the CSS align-content property

we can control the block axis and by CSS justify-content property to control inline axis. But the mail role is played by the CSS column-gap property, without this property task can not be completed. But by using only this property we can achieve the task.

Below examples illustrate the approach:

Example 1:

css

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .gfg { 
        -webkit-column-count: 2; 
        -moz-column-count: 2; 
        column-count: 2; 
         
        -webkit-column-gap: 40px; 
        -moz-column-gap: 40px; 
        column-gap: 40px; /* Specifying Column Gap */
    } 
     
    h1 { 
        color:green; 
    } 
     
    h1, h2 { 
        text-align:center; 
    } 
    </style> 
</head> 
 
<body> 
    <h1> 
        GeeksforGeeks 
    </h1> 
     
    <!-- Columns with a gap of 40px between 
        the columns -->
    <div class="gfg"> 
        The course is designed for students as well as 
        working professionals to prepare for coding 
        interviews. This course is going to have coding 
        questions from school level to the level
        needed for product based companies like Amazon, 
        Microsoft, Adobe, etc. 
    </div> 
</body> 
</html>                     