Raster | Creating Grid Layout with Pure CSS

Raster is a simple CSS grid system, users can generate a responsive modern grid layout using html and css.

Raster - Creating Grid Layout with Pure CSS

AuthorLinksMade withLast update
rsmsOffice HomeCSSSep 15, 2022

How to create grid layout using Raster?

1.Import raster2.css in your html page

<link rel="stylesheet" href="raster2.css">

Create a grid element and specify the number of columns in the columns attributes:

  • columns-s: the number of columns on small screens
  • columns: the number of columns on mid-size screens
  • columns-l: the number of columns on large screens
<grid columns-s=1 columns=2 columns-l=3>
  
</grid>

2.Use r-grid and r-cell to create a grid layout

<r-grid columns=8>
  <r-cell></r-cell>
  <r-cell span=3>3</r-cell>
  <r-cell></r-cell>
  <r-cell span=7-8>7-8</r-cell>
  <r-cell span=2+2>2+2</r-cell>
  <r-cell span=5-8>5-8</r-cell>
  <r-cell span=1-4>1-4</r-cell>
  <r-cell span=6..>6..</r-cell>
  <r-cell span=2..>2..</r-cell>
  <r-cell span=4..>4..</r-cell>
  <r-cell span=1-2>1-2</r-cell>
  <r-cell span=4-5>4-5</r-cell>
</r-grid>

Leave a Reply

Your email address will not be published. Required fields are marked *