CSS Grid - Basic Columns

Here is a basic demo showing the usage for css grid columns. You just need to add the display:grid property and then add the grid-template-columns: adding the size of each column, adding a value for each one like so.

This will add a grid with 3 equal cols

grid-template-columns: 33% 33% 33%

you can also add columns using grid-template-columns: auto 50px 10% 2fr 1fr; with mixed width values

add a gap with grid-column-gap: 10px;

grid-row-gap works the same for adding gaps to the row items grid-row-gap:10px;

of you can just shorthand the grid-gap with grid-gap:10px 10px

HTML

<div class='grid-wrap'>
<div class='c1'>1</div>
<div class='c2'>2</div>
<div class='c3'>3</div>
<div class='c4'>4</div>
<div class='c5'>5</div>
</div>

CSS

.grid-wrap {
display:grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows:50px 50px;
font-size:22px;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-gap:10px 10px; /* this is shorthand for the grid-column-gap and grid-row-gap */
}
c1,c2,c3,c4,c5 {}
  .c1{background:LightSkyBlue;}
  .c2{background:LightSalmon;}
  .c3{background:PaleTurquoise;}
  .c4{background:LightPink;}
  .c5{background:PaleGreen;}

Demo

1
2
3
4
5

Other Items in css
Page Views

This page has been viewed 76 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹