Grid system

This Flexbox-based grid system, inspired by Bootstrap, allows for easy, responsive layouts. Here’s a quick guide on how to use it:

Flexbox Grid System Tutorial

Step 1: Set Up a Container

Start by adding a container to center and add padding around your content.

<div class="container">
  <div class="row">
    <div class="col col-12">Full Width Column</div>
  </div>
</div>

Step 2: Use Rows to Wrap Columns

Wrap your columns in a row to structure them in a horizontal layout.

<div class="row">
  <div class="col col-6">Half Width</div>
  <div class="col col-6">Half Width</div>
</div>

Step 3: Define Columns with Responsive Classes

Assign column classes to control width at different screen sizes:

<div class="row">
  <div class="col-sm-12 col-md-6 col-lg-4">Responsive Column</div>
  <div class="col-sm-12 col-md-6 col-lg-4">Responsive Column</div>
  <div class="col-sm-12 col-md-6 col-lg-4">Responsive Column</div>
</div>

Step 4: Responsive Adjustments

As the viewport changes, columns adjust based on their class. For instance:

`col-12`: Full width on all screens
`col-md-6`: Half width on medium and larger screens
`col-lg-4`: One-third width on large screens

Step 5: Example of Nested Columns

You can nest rows within columns for more complex layouts:

<div class="container">
  <div class="row">
    <div class="col col-6">
      <div class="row">
        <div class="col col-6">Nested Column</div>
        <div class="col col-6">Nested Column</div>
      </div>
    </div>
    <div class="col col-6">Half Width Column</div>
  </div>
</div>