Designing a simple 3 column grid with OxyMade Framework
Now we are creating a simple 3 col grid to see how easy it is.
We have followed the below steps to create a simple 3 column grid:
First we have added a section to the page, then added a div. We can’t add grid to the section. We need to add grid to divs only.
We added the class
gridto initiate the grid.
grid-cols-3to make the grid 3 columns.
32pxgap between grid elements.
roundedclass to add border radius.
Added a div inside the grid container. And added some text, padding and alternative background color.
That’s it. We have created a simple 3 column grid which maintains the perfect gap.