Joy Grid Layout - simple css grid

Joy Grid Layout is a simple and fast working adaptive css grid. Based on the latest standard CSS Grid Layout. Uses grid 12 columns for responsive design website. Css Grid layout is similar to the Bootstrap 4 markup. Only 7KB minified.


Basic syntax

<div class="grid">
    <div class="col-1"> col-1 </div>
------------------------------
    <div class="col-xl-7"> col-xl-7 </div>  
</div>

col-1

col-11

col-sm-2

col-sm-10

col-md-3

col-md-9

col-lg-4

col-lg-8

col-xl-5

col-xl-7

Extra small devices (portrait phones < 576px prefix -xs)

<div class="grid">
    <div class="col-xs-4"> col-xs-4 </div>
    <div class="col-xs-8"> col-xs-8 </div>
</div>

col-xs-4

col-xs-8

Small devices (landscape phones 576px - 768px prefix -sm)

<div class="grid">
    <div class="col-sm-4"> col-sm-4 </div>
    <div class="col-sm-8"> col-sm-8 </div>
</div>

col-sm-4

col-sm-8

Medium devices (tablets 768px - 992px prefix -md)

<div class="grid">
    <div class="col-md-4"> col-md-4 </div>
    <div class="col-md-8"> col-md-8 </div>
</div>

col-md-4

col-md-8

Large devices (desktops 992px - 1200px prefix -lg)

<div class="grid">
    <div class="col-lg-6"> col-lg-6 </div>
    <div class="col-lg-6"> col-lg-6 </div>
</div>

col-lg-4

col-lg-8

Extra large devices (large desktops > 1200px prefix -xl)

<div class="grid">
    <div class="col-xl-6"> col-xl-6 </div>
    <div class="col-xl-6"> col-xl-6 </div>
</div>

col-xl-6

col-xl-6

Simple example

<div class="grid">
   <div class="col-md-7">col-md-7</div>
   <div class="col-md-5">
     <div class="col-md-12">col-md-12</div>
     <div class="col-md-12">col-md-12</div>
     <div class="col-md-12">col-md-12</div>
   </div>                  
</div>

col-md-7

col-md-12

col-md-12

col-md-12

Align items top vertically(default)

<div class="grid align-items-start">
    <div class="col-5"> col-5 </div>
    <div class="col-5"> col-5 </div>
</div>

col-5

col-5

Align items center vertically(default)

<div class="grid align-items-center">
    <div class="col-5"> col-5 </div>
    <div class="col-5"> col-5 </div>
</div>

col-5

col-5

Align items bottom vertically(default)

<div class="grid align-items-end">
    <div class="col-5"> col-5 </div>
    <div class="col-5"> col-5 </div>
</div>

col-5

col-5

Nested (grid in grid)

<div class="grid">
  <div class="grid col-md-6">
      <div class="col-md-12">col-md-12</div>
      <div class="col-md-6">col-md-6</div>    
      <div class="col-md-6">col-md-6</div>    
  </div>
  <div class="col-md-6">col-md-6</div>
  <div class="col-md-12">col-md-12</div>
</div>

col-md-12

col-md-6

col-md-6

col-md-6

col-md-12

Images grid auto

<div class="grid-auto gap-20">
  <img src="img/demo/a1.png"/>
---------------------------------
  <img src="img/demo/a6.png"/>   
</div>

Css grid system on Grid Responsive light grid system for photo gallery Free css grid for responsive sites Light and fast crid css

Site template

<div class="grid">
  <div class="col-md-12">Header</div>
  <div class="col-md-3">Sidebar</div>
  <div class="col-md-6">Content</div>  
  <div class="col-md-3">Sidebar</div>
  <div class="col-md-12">Footer</div>
</div>

Header

Content

Joy Grid Layout - simple css grid

Simple css grid, responsive and adaptive, small size, easy and flexsible