CSS Grid Layout Generator - Angry Tools

angrytools Donate

• Advance CSS Generator
• CSS Animation Kit
• Gradient Generator
• Flexbox layout Generator
• Grid layout Generator
• CSS Media Query

• Android Development Tools
• Android Button Maker
• Android Pixel Calculator

• Text Conversion
• Base64 encode and decode
• CSS minify and beautify
• JavaScript encode and decode
• MD5 hash generator
• AES encryption and decryption

• CSS Generator
• Border
• Border Radius
• Box Shadow
• Background
• Text Shadow
• CSS Gradient
• Matrix Transform
• Transition
• Animation
• Image Filter

• Image Tools
• Gradient Image
• Image Color Picker/Palette
• Image Crop
• Image Rotate
• Image Resize
• Image Filter
• Image Grayscale
• Image Base64
• Image Compress

• Other Tools
• Code for Email
• Blob Generator
• Wave Generator
• Sunburst Generator
• Basic Commands - Ubuntu/Windows
• Bootstrap Code Editor

CSS Grid Layout Generator grid-template-rows - + example - 1fr, 20px, 10%, auto, repeat(2, 100px), minmax(20px, auto) grid-template-columns - + more display grid inline-grid required - grid or inline-grid gap optional - grid gap in pixel additional style + - + - x

Grid Item

grid-area (label) example: header, side-navbar color additional style (css) Save < > View Output Copy to clipboardcopy

CSS Grid allow us to create two dimensional layout on a web page and arrange child elements in specified row, column structure.

Two primary parts of grid layout are: Grid container and Grid itemGrid containerGrid ContainerGrid CellColumnsRowsGrid ItemGrid Item1234512341px, fr, % etc1) Grid container - Parent element that hold all the grid items. Grid container define template area of how many rows and columns would be there. It also define size of grid cell.<div class='angry-grid' > <div class='item-0'>item 0</div> <div class='item-1'>item 1</div> ...</div>There are multiple CSS properties available for grid container, few of them are use as a shorthand.But the three important CSS instructions given to the browser are a) Element is a grid container.b) Total numbers of rows and columns are in the grid.c) Area cover for each grid cell.display: grid | inline-gridgrid-template-rows: px, fr, em, auto, %, minmax(), repeat() grid-template-columns: px, fr, em, auto, %, minmax(), repeat() 2) Grid items - Child elements that inside the grid container called grid items.<div class='angry-grid' > <div class='item-0'>item 0</div> <div class='item-1'>item 1</div> ...</div>Similarly grid item has CSS properties to fit itself into the grid cell.

Responsive Grid

To make a responsive grid, you can use fraction(fr), percent(%), auto units in the grid-template.

Other responsive option is to use @media query and redefine grid-template for multiple device breakpoints

.angry-grid { display: grid; grid-template-rows: 4rem auto 45px; grid-template-columns: 16rem auto; grid-template-areas: 'logo header' 'sidebar main-content' 'sidebar footer'; }@media (max-width: 767px){ .angry-grid { grid-template-rows: 4rem auto auto 45px; grid-template-columns: 16rem auto; grid-template-areas: 'logo header' 'sidebar sidebar' 'main-content main-content'; 'footer footer'; }}

resources

• » Basics of grid layout
• » Grid vs Flexbox