-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
A Grid Container is the parent element in a CSS Grid layout. When you set display: grid
(or display: inline-grid
) on an element, it becomes a grid container, and its direct child elements become grid items.
The grid container defines the structure of the grid, including columns, rows, spacing, and alignment.
.grid-container {
display: grid; /* or inline-grid */
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Property | Description |
---|---|
display: grid |
Enables grid layout |
grid-template-columns |
Defines the number and size of columns |
grid-template-rows |
Defines the number and size of rows |
gap or grid-gap |
Sets spacing between rows and columns |
justify-items |
Aligns items horizontally within their cells |
align-items |
Aligns items vertically within their cells |
justify-content |
Aligns the entire grid horizontally within the container |
align-content |
Aligns the entire grid vertically within the container |
grid-auto-flow |
Controls how auto-placed items are inserted |
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 20px;
}
This creates a 2×2 grid with a 20px gap between items.
.grid-inline {
display: inline-grid;
grid-template-columns: auto auto;
}
This behaves like an inline element while keeping grid behavior.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
This creates a responsive container that adjusts column count based on screen width.
✅ Write CSS for the following:
Q1. Create a grid container with 3 equal columns.
Q2. Add 15px spacing between grid rows and columns.
Q3. Define 2 rows with fixed height and 2 flexible columns.
Q4. Make a responsive grid with auto-fit and minmax.
Q5. Center all items inside the container using alignment properties.
Q6. Create a grid container that uses inline-grid.
Q7. Set grid-auto-flow: column;
to fill items column-wise.
Q8. Apply different alignment for items inside cells.
Q9. Set the grid container to 100% height and vertically center its items.
Q10. Add a background color to grid items for better visibility.
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)