Advanced Grid

Learn to create more advanced grids using the framework

In this video, we are going to play with our grid controls to create more advanced grid using col-span, col-start and col-end controls.

And also we have created a responsive grid which makes the grid two columns in lg breakpoint, one column in sm breakpoint.

Steps we have followed to make it responsive grid.

1. Responsive controls works when we add a breakpoint name before the actual class.

2. If you check our cheatsheet, we have a few responsive classes for grid and other classes.

3. By adding lg-grid-cols-2, we are adding a control to make the grid a two-column one in lg breakpoint.

4. Same way, by adding sm-grid-cols-1, we are displaying the grid in one column in sm breakpoint.

Just keep practising the grid and other classes with our framework. You have better control, more options to play with.

Once you get some hold on our framework, it is a lot faster and easier than the traditional Oxygen editor experience to create anything.