Grids are commonly used throughout designs in order to space content out in an appropiate style. Grids allow the design to maintain it's shape and enhance the layout of the page. There are various grids that can be used ranging from 1 large grid spread across the page to as many as you want. Most websites tend to use 12-unit grids.
2 Column Grid with Padding
HTML and CSS Code
HTML Code
<![CDATA[
<div class="grid-container2">
<div class="grid-item2">Column 1</div>
<div class="grid-item2">Column 2</div>
</div>
]]>
CSS Code
<![CDATA[
.grid-container2 {
display: grid;
grid-template-columns: 49.5% 49.5%;
background-color: #333333;
padding: 10px;
column-gap: 1%;
width: 100%;
}
.grid-item2 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
]]>
3 Column Grid with Padding
Column 1
Column 2
Column 3
HTML and CSS Code
HTML Code
<![CDATA[
<div class="grid-container3">
<div class="grid-item3">Column 1</div>
<div class="grid-item3">Column 2</div>
<div class="grid-item3">Column 3</div>
</div>
]]>
CSS Code
<![CDATA[
.grid-container3 {
display: grid;
grid-template-columns: 32.66% 32.66% 32.66%;
background-color: #333333;
padding: 10px;
column-gap: 1%;
width: 100%;
}
.grid-item3 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
]]>
4 Column Grid with Padding
Column 1
Column 2
Column 3
Column 4
HTML and CSS Code
HTML Code
<![CDATA[
<div class="grid-container4">
<div class="grid-item4">Column 1</div>
<div class="grid-item4">Column 2</div>
<div class="grid-item4">Column 3</div>
<div class="grid-item4">Column 4</div>
</div>
]]>
CSS Code
<![CDATA[
.grid-container4 {
display: grid;
grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
background-color: #333333;
padding: 10px;
column-gap: 1%;
width: 100%;
}
.grid-item4 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
]]>