From 9fad50e7a67ed8d0be10a6c27ad5f0811d0853f5 Mon Sep 17 00:00:00 2001 From: ~Chiluka Akshitha <120377576+AKSHITHA-CHILUKA@users.noreply.github.com> Date: Mon, 29 Jul 2024 09:43:08 +0530 Subject: [PATCH] Create css-grid.md --- docs/CSS/css-grid.md | 177 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 docs/CSS/css-grid.md diff --git a/docs/CSS/css-grid.md b/docs/CSS/css-grid.md new file mode 100644 index 000000000..960d92eae --- /dev/null +++ b/docs/CSS/css-grid.md @@ -0,0 +1,177 @@ +# CSS Grid + +## Introduction +CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web. It allows you to design complex web layouts with rows and columns, making it easier to create responsive designs. + +## Basic Concepts + +### Grid Container +A grid container is an element with `display: grid`. The children of this container become grid items. + +```css +.container { + display: grid; +} +``` + +### Grid Items +The direct children of a grid container automatically become grid items. + +```html +
+
Item 1
+
Item 2
+
Item 3
+
+``` +## Grid Properties +### Container Properties +#### grid-template-columns and grid-template-rows + +Defines the columns and rows of the grid. + +```css +.container { + grid-template-columns: repeat(3, 1fr); /* 3 equal columns */ + grid-template-rows: 100px 200px; /* 2 rows with specific heights */ +} +``` + +#### grid-gap + +Defines the gaps (gutters) between rows and columns. +```css +.container { + grid-gap: 10px; /* gap between rows and columns */ +} +``` + +#### grid-template-areas + +Defines named grid areas. + + +```css +.container { + grid-template-areas: + 'header header header' + 'sidebar content content' + 'footer footer footer'; +} +``` +## Item Properties +#### grid-column and grid-row + +Specifies the start and end lines for the item. +```css +.item { + grid-column: 1 / 3; /* spans from column line 1 to 3 */ + grid-row: 1 / 2; /* spans from row line 1 to 2 */ +} +``` + +#### grid-area + +Specifies a grid item’s size and location within the grid by referencing the name of a grid area. + +```css +.item { + grid-area: header; +} +``` +# Examples +## Basic Grid Layout +```html + + + + + + + + +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
+ + +``` + +## Grid Layout with Areas + +```html + + + + + + + + +
+
Header
+
Sidebar
+
Content
+
Footer
+
+ + +``` + +# Conclusion +CSS Grid is a powerful tool for creating complex and responsive web layouts. By understanding its various properties, you can design flexible and efficient layouts with ease. + + +This guide covers the essential properties, concepts, and examples to help users understand and apply CSS Grid in their projects.