This repository serves as a learning resource for CSS Grid layouts. It includes various examples and exercises to help you understand and practice CSS Grid concepts. The content of this repository is based on the CSS Grids tutorial by Net Ninja.
CSS Grid is a powerful layout system that allows you to create complex grid-based designs with ease. This repository aims to provide a step-by-step guide and hands-on exercises to help you master CSS Grid layouts. Whether you are a beginner or have some experience with CSS, this tutorial will enhance your understanding of CSS Grid and its capabilities.
To get started with this tutorial, follow these steps:
- Clone or download this repository to your local machine.
- Open the desired example folder in your preferred code editor.
- Study the code and explore the CSS and HTML files provided.
- Modify and experiment with the code to see how it affects the layout.
- Follow the instructions and exercises provided in each example folder.
- Progress through the examples from basics to more advanced layouts.
- Have fun and enjoy learning CSS Grid!
This repository includes the following examples:
- Basics: Introduction to CSS Grid and basic grid layouts.
- Multi Column: Creating multi-column grid layouts.
- Holy Grail: Implementing the Holy Grail layout using CSS Grid.
- Masonry: Creating a masonry grid layout for variable-height elements.
- Portfolio: Building a responsive portfolio grid layout.
- Twelve Col: Implementing a twelve-column grid system.
Feel free to explore each example folder and dive into the code to understand how CSS Grid is utilized to achieve different layouts. Each example folder contains its own README file with detailed instructions and explanations.
- Net Ninja CSS Grids Tutorial - The original tutorial by Net Ninja on YouTube.