https://github.com/loosedwhale/grid_website_assigment

https://github.com/loosedwhale/grid_website_assigment

assignment css css3 html html5

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/loosedwhale/grid_website_assigment
• Owner: LoosedWhale
• Created: 2023-11-23T15:52:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2023-11-23T17:47:08.000Z (12 months ago)
• Last Synced: 2024-10-11T11:12:17.440Z (26 days ago)
• Topics: assignment, css, css3, html, html5
• Language: HTML
• Homepage:
• Size: 33.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Grid Website Assigment

## Seeing how gride works on webstites usin `html` and `css`

Languages and Tools:

        

# Using CSS Grid in HTML and CSS

## Introduction

CSS Grid is a powerful layout system that allows you to design complex web layouts with ease. It provides a two-dimensional grid-based layout system that is ideal for both simple and intricate designs. This guide will help you understand the basics of using CSS Grid in your HTML and CSS to create responsive and flexible layouts.

## Getting Started

To use CSS Grid in your project, follow these steps:

### 1. Create Your HTML Structure

```html



  

  

  

  Your Web Page


  

```

### 2. Link Your CSS Stylesheet

Create a styles.css file and link it in your HTML file. This is where you'll define your grid layout.

### 3. Define Your CSS Grid

In your styles.css, define the grid container and its items:

```css

body {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* Three equal columns */

  grid-gap: 20px; /* Adjust the gap between grid items */

}

/* Example grid item styling */

.grid-item {

  background-color: #ddd;

  padding: 20px;

  text-align: center;

}

```

## Basic Concepts

### 1. Grid Container Properties

`display: grid;`: Defines the element as a grid container.\

`grid-template-columns`: Specifies the size and number of columns.\

`grid-template-rows`: Specifies the size and number of rows.\

`grid-gap`: Creates space between grid items.

### 2. Grid Item Properties

`grid-column`: Specifies the item's position in the grid columns.\

`grid-row`: Specifies the item's position in the grid rows.\

`grid-area`: Combines `grid-row` and `grid-column` into a single shorthand property.

## Example Usage 

```css



  
Item 1

  
Item 2

  
Item 3

  



```

## Advanced Features

CSS Grid offers advanced features such as grid template areas, auto placement, and responsive design. Explore these features to enhance your layout capabilities.


For more detailed information, refer to the [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/).

Feel free to customize the grid properties based on your project's requirements and design preferences.