Tutorial: CSS Grid
Published: 2021-07-31 14:24:00

---
title: Tutorial: CSS Grid
published: true
date: 2021-04-20 01:16:04 UTC
tags: 
canonical_url: https://www.devwares.com/blog//css-grid
series: Devwares Web development Free Course
---


![Cover image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uggx1zagx6cyzvhhj5el.png)


## CSS Grid

[CSS Grid](https://www.devwares.com/tailwindcss/classes/tailwind-grid/) is a powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.


![grid image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpgy3obdsklle9xrqx8u.png)

## Basic Terminology

Before diving into the details of CSS Grid, it's important to understand some basic terminology:

- **Grid Container:** The element on which display: grid is applied. It's the direct parent of all the grid items. In our example we’ll be referring to .container as our grid container.

- **Grid Item:** The children (direct descendants) of the grid container.

- **Grid Line:** The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines").

- **Grid Cell:** A single unit of the grid.

- **Grid Track:** The space between two adjacent grid lines. This can be a row or a column.

- **Grid Area:** Any area of the grid bound by four grid lines.

## Basic Grid Structure

To get started with CSS Grid, we need to define a grid container. We do this by using the display property with the value of grid.

```css
.container {
  display: grid;
}
```

## Defining Columns and Rows

Inside the grid container, you define your [columns](https://www.devwares.com/tailwindcss/classes/tailwind-grid-column-start-end/) and [rows](https://www.devwares.com/tailwindcss/classes/tailwind-grid-row-start-end/). You can do this using [grid-template-columns](https://www.devwares.com/tailwindcss/classes/tailwind-grid-column/) and [grid-template-rows](https://www.devwares.com/tailwindcss/classes/tailwind-grid-row/).

```css
.container {
  display: grid;
  grid-template-columns: 200px 400px auto;
  grid-template-rows: auto 100px;
}

```

In this example, the grid will have three columns; the first will be 200px wide, the second 400px, and the third will automatically take up the remaining space. For the rows, the first row's height will be as large as its content, and the second row will be 100px.

## Grid Gaps

To create some space between your grid items, you can use [grid-gap](https://www.devwares.com/tailwindcss/classes/tailwind-grid-auto-flow/), grid-row-gap, and grid-column-gap.

```css
.container {
  display: grid;
  grid-template-columns: 200px 400px auto;
  grid-template-rows: auto 100px;
  grid-gap: 20px;
}
```



## Grid Auto Flow

The [grid-auto-flow](https://www.devwares.com/tailwindcss/classes/tailwind-grid-auto-flow/) property controls how the auto placement algorithm works. It specifies exactly how auto-placed items get flowed into the grid.

```css
.container {
  display: grid;
  grid-template-columns: 200px 400px auto;
  grid-template-rows: auto 100px;
  grid-gap: 20px;
  grid-auto-flow: row;
}

```

In this example, the grid items will be placed from left to right across the [rows](https://www.devwares.com/tailwindcss/classes/tailwind-grid-auto-rows/). If you set grid-auto-flow to column, the items would be placed from top to bottom down the [columns](https://www.devwares.com/tailwindcss/classes/tailwind-grid-auto-columns/).

![Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuz057uo4vkmvma7bdom.png)

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about [contrast](https://www.devwares.com/product/bootstrap-contrast-pro).

## Resources 

- [Contrast Design Bootstrap](https://www.devwares.com/docs/contrast/javascript/index/)
- [Accordion](https://www.devwares.com/docs/contrast/javascript/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/javascript/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/javascript/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/javascript/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/javascript/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/javascript/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/javascript/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/javascript/components/buttonGroup/)
- [Button](https://www.devwares.com/docs/contrast/javascript/components/buttons/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/javascript/components/buttonToolbar/)
- [Card](https://www.devwares.com/docs/contrast/javascript/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/javascript/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/javascript/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/javascript/components/collapse/)
- [DataTable](https://www.devwares.com/docs/contrast/javascript/components/datatables/)
- [DatePicker](https://www.devwares.com/docs/contrast/javascript/components/datepicker/)
- [DropDown](https://www.devwares.com/docs/contrast/javascript/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/javascript/components/footer/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/components/forms/)
- [Icon](https://www.devwares.com/docs/contrast/javascript/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/javascript/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/javascript/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/javascript/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/javascript/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/javascript/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/javascript/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/javascript/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/javascript/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/javascript/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/javascript/components/panels/)
- [Pop Over](https://www.devwares.com/docs/contrast/javascript/components/popover/)
- [Progress](https://www.devwares.com/docs/contrast/javascript/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/javascript/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/javascript/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/javascript/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/javascript/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/javascript/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/javascript/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/javascript/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/javascript/components/switch/)
- [Table](https://www.devwares.com/docs/contrast/javascript/components/table/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/javascript/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/javascript/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/javascript/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/javascript/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/javascript/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/javascript/table/datatables/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/javascript/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/javascript/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/javascript/widgets/)