• in
InterCourses
CoursesBlogs
0
← CSS
○What is CSS?○CSS Selectors○How to Apply CSS○CSS Specificity
○Colors○Backgrounds○Typography
○The Box Model○Display○Positioning
○Advanced Selectors○Pseudo-Classes
○Dropdown Structure○Dropdown Behavior
○Form Structure○Form Styling
○Flexbox Basics○Flexbox Alignment○Flexbox Items○Flexbox Layouts
○CSS Grid
○Website Structure●Grid and Responsive
○CSS Variables○Transitions
○Transition Effects○Keyframe Animation
○Responsive Design
○Table Structure○Responsive Table Styling
○Resume Structure○Resume Polish

Grid and Responsive

Add CSS Grid layout to the features section and make it responsive.

Step-by-step instructions

  1. Set .features to display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;.
  2. Add a media query at max-width: 900px to reduce features grid to 1 column.
  3. Add card padding and border radius for visual clarity.
Hint 1
1 / 2
HINT 1

Use display: grid with repeat() for equal columns.

Loading editor…
READY
intercourses
html