🌈
NextGenCSS
  • 🔥NextGenCSS🔥
    • How to Contribute ?
  • Installation
    • Install and Use
    • Set Up
    • React
  • 🌟Quick Start
    • Get Started
    • Optimizations
    • Breakpoints
    • Colors
    • Buttons
    • BackGround Color
    • Border
    • Font
    • Icons
  • 🧩Components
    • Box
    • Card
    • Footer
    • NavBar
    • Switch
  • ⚒️Utilities
    • Display
    • Align
    • Center
    • Flex
    • Left
    • Right
    • Padding
    • Margin
    • Grid
    • Scale
  • forms
    • Input Box
  • ☺️Releases and Changelog
    • 0.0 🔥🔥 1st Release
Powered by GitBook
On this page
  • .containerContainer
  • Example

Was this helpful?

Edit on GitHub
  1. Utilities

Grid

Grid in NextGenCSS🔥

This responsive grid system is designed to help you create flexible and responsive layouts in your web project.

.containerContainer

Use .grid class to make a .containerContainer

Use .column classes .col-{..number} to define the width of your grid items. Columns are based on a 12-column layout , And .column for element in new column.

Classes for column

  • .col-1

  • .col-2

  • .col-3

  • .col-4

  • .col-5

  • .col-6

  • .col-7

  • .col-8

  • .col-9

  • .col-10

  • .col-11

  • .col-12

Example

<div class="container">
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

Last updated 1 year ago

Was this helpful?

⚒️