网站技能区display: grid高度适配异常问题求助

Hey, let’s work through this grid height issue you’re facing with your skills section. The core problem here is tied to how you’ve defined your grid rows, and that’s why your container can’t properly wrap all its content—plus using vh for height was never going to play nice with responsive design anyway.

What’s Causing the Height Mismatch? #

You set grid-template-rows: repeat(2, 100%); on .skills-container. This forces each grid row to take up 100% of the container’s height, but since the container doesn’t have an explicit height set, this creates a conflict. Your skill items (with margins, icons, and text) can’t fit into those forced 100% rows, so they overflow the container instead of making it expand to fit them.

The Responsive Fix #

Here’s how to adjust your code to let the container naturally match its content height, no viewport hacks needed:

1. Remove the fixed row height constraint
   Get rid of grid-template-rows: repeat(2, 100%); from .skills-container. CSS Grid will automatically calculate the row height based on your content, which lets the container expand to wrap everything properly.

2. Add bottom padding to the grid container
   Add padding-bottom: 40px; to .skills-container (tweak the value to your liking) to keep the bottom row of skills from sticking directly to the section’s edge—this improves spacing and ensures the section fully encloses all content.

3. Keep your responsive base settings
   Leave height: auto; on .skills-section—this lets the section’s height adapt naturally to its content, which is exactly what you want for responsive design.

Modified CSS Code #

.skills-section { 
  background-color: #626262; 
  margin-top: 100px; 
  text-align: center; 
  height: auto; 
}
.wrapper { 
  width: 85%; 
  margin: 0 auto; 
}
.skills-header { 
  font-family: 'Martel', serif; 
  font-weight: 900; 
  font-size: 2rem; 
  color: white; 
  padding-top: 20px; 
}
.skills-container { 
  justify-items: center; 
  color: white; 
  display: grid; 
  grid-template-columns: repeat(6, 1fr); 
  /* Removed the problematic grid-template-rows line */
  padding-bottom: 40px; /* Added padding to prevent content from sticking to the bottom */
}
.skills-header p, .fa-html5, .fa-css3-alt, .fa-sass, .fa-js-square, .fa-dollar-sign, .fa-react, .fa-fire, .fa-node-js, .fa-git-alt, .fa-cogs, .fa-universal-access, .fa-mobile-alt { 
  text-shadow: 2px 2px 5px #F99A14; 
}
.skills-logo { 
  display: inline-block; 
  height: 40px; 
  width: 65px; 
  margin: 20px; 
}
.skills-logo p{ 
  display: inline-block; 
  font-family: 'Roboto', sans-serif; 
  font-weight: 300; 
  font-size: 1rem; 
}

Bonus: Make It Even More Responsive #

For smaller screens, you’ll want to reduce the number of grid columns to avoid crowding. Add these media queries to your CSS:

@media (max-width: 900px) {
  .skills-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 500px) {
  .skills-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

This will ensure your skills section looks clean and readable on mobile and tablet devices too.

内容的提问来源于stack exchange，提问作者MARshall