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.

Quick video: Using color palette generator

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.