Skip to content

Latest commit

 

History

History
50 lines (34 loc) · 1.86 KB

README.md

File metadata and controls

50 lines (34 loc) · 1.86 KB
Raw

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

Contact

Feel free to reach out for collaboration or questions via your email.

Hashtags

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