# grid system

A simple grid system with 4 screen sizes (sm, md, lg, xl) build using Flex-box CSS3 prooperties & it based on bootstrap media query sizes to make your design responsive with maximum media resolutions

# Install

avaliable installing ways, choose one of them

• npm

npm install --save @mohssineaboutaj/grid-system

• yarn

yarn add --save @mohssineaboutaj/grid-system

• CDN

https://mohssineaboutaj.github.io/grid-system/css/grid-system.min.css

• Download
go to https://github.com/mohssineAboutaj/grid-system, download the zip or clone the repo, copy css file exist on the path

css/grid-system.css

or

css/grid-system.min.css

then follow usage steps bellow

# usage

1. Import css file

   <link rel="stylesheet" href=PATH_OF_CSS_FILE />

   Note: dont forget to replace the PATH_OF_CSS_FILE with a real path of the css file

2. Use css classes

   <div class="row">
     <div class="grid md-6-and-up">
       size 6 columns in medium screens & up
     </div>
     <div class="grid md-6-and-up">
       size 6 columns in medium screens & up
     </div>
   </div>

# browser support

this framework support any browser support the Flex-box properties, here is a table of the browsers supported

#	browser	minimum version
	chrome	29
	internet explorer	11
	firefox	22
	safari	10
	opera	48

# basic grid

A basic columns usage with & without row wrapping

no wrapping

show 4 columns in every screen without any wrapping

<div class="row no-wrap">
	<div class="grid">column 1 of 4</div>
	<div class="grid">column 2 of 4</div>
	<div class="grid">column 3 of 4</div>
	<div class="grid">column 4 of 4</div>
</div>

with wrapping

show 4 columns in every screen with wrapping mode

<div class="row">
	<div class="grid">column 1 of 4</div>
	<div class="grid">column 2 of 4</div>
	<div class="grid">column 3 of 4</div>
	<div class="grid">column 4 of 4</div>
</div>

# in one screen

make a special grid using -only suffix after your class

<div class="row">
	<div class="grid-6 lg-3-only">grid 3 in lg only & grid 6 in other screens</div>
	<div class="grid-6 lg-3-only">grid 3 in lg only & grid 6 in other screens</div>
	<div class="grid-6 lg-3-only">grid 3 in lg only & grid 6 in other screens</div>
	<div class="grid-6 lg-3-only">grid 3 in lg only & grid 6 in other screens</div>
</div>

# hide elements

hide elements on some screens or on one screen, resize the screen to show the effect

<div class="hide-sm-only">hide on sm screen only & show in other screens</div>
<div class="hide-md-only">hide on md screen only & show in other screens</div>
<div class="hide-lg-only">hide on lg screen only & show in other screens</div>
<div class="hide-xl-only">hide on xl screen only & show in other screens</div>