Simple Grid

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:

1. 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.

2. We added the class grid to initiate the grid.

3. grid-cols-3 to make the grid 3 columns.

4. gap-8 to add 32px gap between grid elements.

5. rounded class to add border radius.

6. 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.