• Stars
    star
    624
  • Rank 71,995 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🍱 A tiny CSS grid layout for React

styled-css-grid 🍱

Travis Prettier npm semantic-release License JS.ORG

A tiny (~2kb) CSS grid layout for React, built with styled-components 💅.

examples

See the website.

installation

Install React and styled-components, then:

$ yarn add styled-css-grid

usage

import React from "react";
import { Grid, Cell } from "styled-css-grid";

const MyGrid = () => (
  <Grid columns={2} gap="2px">
    <Cell>foo</Cell>
    <Cell height={2}>bar</Cell>
    <Cell width={2}>baz</Cell>
  </Grid>
);

api

Grid

Wrap your cells in Grid. Pretty simple.

Props:

  • columns: The grid-template-columns CSS property. When a number is passed it is a shorthand to specify the number of columns. Default is 12.
  • gap: The grid-gap CSS property. Default is "8px".
  • columnGap: The column-gap CSS property. Not provided by default.
  • rowGap: The row-gap CSS property. Not provided by default.
  • minRowHeight: Minimum height of each row. Default is "20px".
  • height: The height CSS property. Default is "auto".
  • flow: The grid-auto-flow CSS property. Default is "row".
  • rows: The grid-template-rows CSS property. When a number is passed it is a shorthand to specify the number of rows. Not provided by default.
  • areas: The grid-template-areas CSS property. Pass an array of strings, e.g. ["a a", "b c"]. Not provided by default.
  • justifyContent: The justify-content CSS property. Not provided by default.
  • alignContent: The align-content CSS property. Not provided by default.

Cell

A cell. Not too much to say...

Props:

  • width: Cell width in units, default is 1.
  • height: Cell height in units, default is 1.
  • left: The grid-column-start CSS property. Not provided by default.
  • top: The grid-row-start CSS property. Not provided by default.
  • middle: Vertically align the contents of the cell. Default is false.
  • center: Horizontally align the text contents of the cell. Default is false.
  • area: The grid-area CSS property. Not provided by default.

browser support

caniuse

You can use CSS grid in production today if you don't need to support IE and Edge, or you're building tooling or internal sites where you only need to support one browser.

You can use CSS grid soon if you have to support the latest version of modern browsers. Edge 16 will implement the latest CSS grid spec.

Can I use?

More Repositories

1

prettier-tslint

Code ➡️ prettier ➡️ tslint --fix ➡️ Formatted Code ✨
JavaScript
226
star
2

jest-runner-tsc

🃏A Jest runner for the TypeScript compiler
JavaScript
177
star
3

eslint-plugin-monorepo

ESLint Plugin for monorepos
JavaScript
74
star
4

prettier-config

My personal Prettier configuration
56
star
5

prettier-plugin-bash

Bash plugin for Prettier
JavaScript
38
star
6

prettier-transform

Perform AST transforms before running prettier
JavaScript
24
star
7

vscode-csproj

📕 Visual Studio Code extension to keep your csproj files up to date.
TypeScript
21
star
8

get-monorepo-packages

Get a list of packages from a monorepo
JavaScript
19
star
9

haloapi.js

🎮 Halo 5 API JavaScript client written in TypeScript.
JavaScript
19
star
10

eslint-plugin-mdx

ESLint Plugin for MDX
JavaScript
19
star
11

ast-grep

🔍 Like grep, but more powerful than you can possibly imagine
JavaScript
16
star
12

vscode-levels

🎎 JavaScript scope-based syntax highlighting
TypeScript
13
star
13

monorepo-experiments

Experimenting with rollup and monorepos for front-end apps.
JavaScript
9
star
14

reddit-place-wallpaper

Set reddit.com/r/place as your wallpaper, auto updates
JavaScript
8
star
15

es-function-partial-curry

🚀 Partial application and function currying for EcmaScript.
JavaScript
6
star
16

bob-ross

🎨 Bob Ross Color Palette
JavaScript
6
star
17

lerna-get-packages

Get a list of packages from a lerna repository
JavaScript
4
star
18

jest-magic-mock

JavaScript
4
star
19

generator-npm-package

📦 An opinionated npm package bootstrapper
JavaScript
3
star
20

up-api-google-sheets

Prototype for using the Up Banking API in Google Sheets
JavaScript
3
star
21

ioc-ts

TypeScript Dependency Injection
TypeScript
2
star
22

bingo

Bingo web app
JavaScript
2
star
23

hyperdash

A dashboard for hyperlinks
JavaScript
2
star
24

dailyflag.now.sh

Flag of the Day
JavaScript
2
star
25

minesweeper

Simple minesweeper web app built to learn Knockout.js
TypeScript
2
star
26

simple-text-editor

(really) simple command-line text editor
JavaScript
2
star
27

up-sankey

Sankey Diagrams for Up Accounts
TypeScript
2
star
28

haloapi-schema

JSON-schemas for validating the structure of JSON responses of the Halo 5 Developer's API
2
star
29

concept-lang

The Concept Programming Language
C
1
star
30

world-flags

A simple game to learn world flags
JavaScript
1
star
31

ansible-winrm-kerberos

Ansible docker image with Kerberos and WinRM installed on Ubuntu
Dockerfile
1
star
32

blokuz

Blokuz
JavaScript
1
star
33

fierier

guy fieri
JavaScript
1
star
34

tetris

Java
1
star
35

around-the-world

Simple to use ICU localization library built for MessageFormat
JavaScript
1
star
36

types-b-gone

Convert TypeScript Code to JavaScript in-place
JavaScript
1
star
37

docker-node-git

Node.js Alpine Docker Image with git installed
1
star
38

how-far-lucas-go

Ruby
1
star
39

duck-magic

Utilities for Ducks - Modular Redux
JavaScript
1
star
40

prettier-python-lambda

Lambda function for parsing Python code into a JSON AST
Python
1
star