CSS grid part 2 – columns

The CSS grid is made up of rows and columns. The width of the columns and the number of columns per content area is set in CSS.

How to set columns

Below, all that is needed to create columns is a wrapper element and the content items.The parameter grid-template-columns is used to set columns.

HTML code

<div id="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Percentage

There are three main ways to create columns, percentages, fractional units and/ or repeat. below a percentage value is used for each column.

#wrapper{
  display: grid;
  grid-template-columns: 20% 40% 20%;
  color: white;
}

Below fr units are used.

fr units are used to distribute columns in a responsive way, they can also be mixed with percentage and repeat values. Here three evenly sized columns are created.

#wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  color: white;
}

Repeat columns

Columns can be repeated the syntax is: grid-template-columns: repeat(6,1fr)

#wrapper{
  display: grid;
 grid-template-columns: repeat(6, 1fr); 
  color: white;
}

Leave a Reply

Your email address will not be published. Required fields are marked *