Minimal Modern Grid Layout Systm In Pure CSS – Raster

Category: CSS & CSS3 , Layout , Recommended | March 2, 2019
Author: rsms
Views Total: 202
Official Page: Go to website
Last Update: March 2, 2019
License: MIT

Preview:

Minimal Modern Grid Layout Systm In Pure CSS – Raster

Description:

Raster is a pure CSS layout system that makes it simple to generate a responsive modern grid layout using descriptive HTML and CSS Grid Layout.

See also:

How to use it:

Download and import the stylesheet grid.css in the HTML document.

<link rel="stylesheet" href="grid.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>

Insert cells to the layout and specify the number of columns the cell spans using the span attribute:

  • span=6: 6 columns
  • span=11-16: starts in column 11, ends in column 16
  • span=2+4: starts in column 2, spans 4 columns.
  • span=6..: starts in column 6, spans remainder of row
  • span=row: span a full row
<grid columns="16">
  <c>1</c><c>2</c><c>3</c><c>4</c><c>5</c><c>6</c><c>7</c><c>8</c>
  <c>9</c><c>10</c><c>11</c><c>12</c><c>13</c><c>14</c><c>15</c><c>16</c>
  <c></c>
  <c span=6>6</c>
  <c></c>
  <c span=11-16>11-16</c>
  <c span=2+4>2+4</c>
  <c span=6-14>6-14</c>
  <c span=1-4>1-4</c>
  <c span=6..>6..</c>
  <c span=4..>4..</c>
  <c span=8..>8..</c>
  <c span=4-10>4-5</c>
</grid>

Changelog:

03/02/2019

  • v6

You Might Be Interested In:


Leave a Reply