https://github.com/anshuman-02/css-grid-size

A responsive website showcasing various CSS Grid layout techniques, including auto-size, fixed-size, fractional-size, minmax-size, repeat, and a test section for practicing skills.
https://github.com/anshuman-02/css-grid-size

css css-grid css-grid-demo frontend html interactivelearning layouttechniques learning-css responsive-design webdevelopment

Last synced: 2 days ago
JSON representation

A responsive website showcasing various CSS Grid layout techniques, including auto-size, fixed-size, fractional-size, minmax-size, repeat, and a test section for practicing skills.

• Host: GitHub
• URL: https://github.com/anshuman-02/css-grid-size
• Owner: Anshuman-02
• Created: 2024-08-14T22:01:24.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-16T04:08:28.000Z (4 months ago)
• Last Synced: 2024-08-16T05:25:43.198Z (4 months ago)
• Topics: css, css-grid, css-grid-demo, frontend, html, interactivelearning, layouttechniques, learning-css, responsive-design, webdevelopment
• Language: HTML
• Homepage:
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Grid Layout Demo

This project demonstrates various CSS Grid layout techniques through a responsive website. The website covers the following methods:

- **Auto-Size Grid**

- **Fixed-Size Grid**

- **Fractional-Size Grid**

- **Minmax-Size Grid**

- **Repeat Function**

- **Test Section:** Allows users to write their own code and perform given task to understand more about grid sizing.

## Features

- **Responsive Design:** The website adapts to different screen sizes, ensuring a consistent user experience.

- **Interactive Test Section:** Practice and test your CSS Grid knowledge by writing your own code.

- **Comprehensive Examples:** Each grid technique is implemented with detailed examples and explanations.

## File Structure

- `index.html`: Main page linking to each grid technique.

- `auto-size.html`: Demonstrates auto-sizing grids.

- `fixed-size.html`: Shows how fixed-size grids work.

- `fractional-size.html`: Example of fractional-size grids.

- `minmax-size.html`: Demonstrates minmax-size grids.

- `repeat.html`: Shows how the repeat function works.

- `test.html`: A section where you can write your own CSS Grid code and see the results.

## How to Use

1. Clone the repository: `git clone https://github.com/Anshuman-02/css-grid-layout.git`

2. Open the `index.html` file in your browser to view the demo.

3. Explore each linked page to see the different CSS Grid techniques in action.

4. Use the `test.html` page to practice your own CSS Grid code.

## Technologies Used

- HTML

- CSS (Grid, Responsive Design)

## Author

- **Anshuman** - [LinkedIn](https://www.linkedin.com/in/anshuman14/) | [GitHub](https://github.com/Anshuman-02)

## Contact

Feel free to reach out for collaboration or questions via [your email]([email protected]).

## Hashtags

#CSSGrid #ResponsiveDesign #WebDevelopment #Frontend #LearningCSS #LayoutTechniques #InteractiveLearning #CSSGridPractice