Grid

HSM Grid

HSM follows 12 Column Grid sysytem as shown below.
- It is responsive by default;

- .grid class wraps around everything. It sets the display property to grid which activates the CSS Grid
- To set horizontal gutter, we used grid-row-gap properties. Layout.

.grid  {
	display: grid;
	column-gap: 2%;
	grid-row-gap: 10px;
}
        	 		

- You can use .column2 class with .grid class to make 2 column grid. - To set horizontal gutter, we used grid-row-gap properties. Layout.

  .column2 {
	grid-template-columns: repeat(2, 49%);
  }
        		

2 Column Layout

- You can use .column2 class with .grid class to make 2 column grid.
- To set horizontal gutter, we used grid-row-gap properties.
- You can also use .column2-md class to change layout to 2 colunm in medium viewport size. Layout.
-For 2 column grid you .column3 wrapper should have only 2 direct child elements.

.column2 {
	grid-template-columns: repeat(2, 49%);
}
	   	

Required HTML Structure:

<section class="grid column2">
   <article class="col">
	   <h3>Article 1 - 49%</h3>
	   <p> 2 column layout. ....  </p>
   </article>
   <article class="col">
	   <h3>Article 2 - 49%</h3>
	   <p> 2 column layout. .... </p>
   </article>
</section>
 	 	   		

3 Column Layout

- You can use .column3 class with .grid class to make 3 column grid.
- For 3 column grid you .column3 wrapper should have only 3 direct child elements. -each column will span 32% of its container width;

.column2 {
	grid-template-columns: repeat(3, 32%);
}
	   	

Required HTML Structure:

<section class="grid column3">
 <article>
 	<h3>Article 1 - 32%</h3>
 	<p> 3 column layout. .... </p>
 </article>
 <article>
 	<h3>Article 2 - 32%</h3>
 	<p> 3 column layout. ....</p>

 </article>
 <article>
 	<h3>Article 3 - 32%</h3>
 	<p> 3 column layout. ....</p>
 </article>
</section>

 	 	   		

4 Column Layout

- You can use .column4 class with .grid class to make 4 column grid.
- For 4 column grid you .column3 wrapper should have only 4 direct child elements. - each column will span 23.5% of its container width; - It is responsive and will go to 2 column at medium viewport size and 1 column small viewport size

.column2 {
	grid-template-columns: repeat(2, 23.5%);
 }
        	 		

Required HTML Structure:

<section class="grid column4">
	 <article>
		<h3>Article 1 - 23.5%</h3>
		<p> 4 column layout. </p>
	 </article>
	 <article>
		<h3>Article 2 - 23.5%</h3>
		<p> 4 column layout. </p>

	 </article>
	 <article>
		<h3>Article 3 - 23.5%</h3>
		<p> 4 column layout.  </p>
	 </article>
	 <article>
		<h3>Article 4 - 23.5%</h3>
		<p> 4 column layout. </p>
	 </article>
</section>
 	 	   		

Aside Left

- You can use .asideLeft class with .grid class to make 2 column grid.
- This will be 2 colunm grid so .asideLeft wrapper should have only 2 direct child elements.

 .asideLeft {
	grid-template-columns: 1fr 3fr;
}
        	 		

Required HTML Structure:

<section class="grid asideLeft">
 <aside>
 	<h3>Aside left</h3>
 	<p> Aside left. ....</p>
 	<p> Paragraph 2. ....</p>
 </aside>
 <article>
 		<h3>Page content</h3>
 		<p> Lorem ipsum dolor sit amet....</p>

 		<h3>Heading 1</h3>
 		<p> Lorem ipsum dolor sit amet... </p>

 		<h3>Heading 2</h3>
 		<p> Lorem ipsum dolor sit amet... </p>
 </article>
</section>
 	 	   		

Aside Right

- You can use .asideRight class with .grid class to make 2 column grid.
- This will be 2 colunm grid so .asideRight wrapper should have only 2 direct child elements.

 .asideLeft {
	grid-template-columns: 1fr 3fr;
}
        	 		

Required HTML Structure:

<section class="grid asideright">
 <article>
 		<h3>Page content</h3>
 		<p> Lorem ipsum dolor sit amet....</p>

 		<h3>Heading 1</h3>
 		<p> Lorem ipsum dolor sit amet... </p>

 		<h3>Heading </h3>
 		<p> Lorem ipsum dolor sit amet... </p>
 </article>
 <aside>
 	<h3>Aside left</h3>
 	<p> Aside left. ....</p>
 	<p> Paragraph 2. ....</p>
 </aside>
</section>
 	 	   		

Two Sides

Required HTML Structure:

<section class="grid doubleSides">
<aside>
 	<h3>Aside left</h3>
 	<p> Aside left. ....</p>
 	<p> Paragraph 2. ....</p>
 </aside>
 <article>
 		<h3>Page content</h3>
 		<p> Lorem ipsum dolor sit amet....</p>

 		<h3>Heading 1</h3>
 		<p> Lorem ipsum dolor sit amet... </p>

 		<h3>Heading </h3>
 		<p> Lorem ipsum dolor sit amet... </p>
 </article>
 <aside>
 	<h3>Aside left</h3>
 	<p> Aside left. ....</p>
 	<p> Paragraph 2. ....</p>
 </aside>
</section>
 	 	   		

See All Examples