如何在不破坏布局的前提下实现网格组件的响应式适配？

原设计效果 #

原代码实现 #

CSS #

.cuadro-valores {
  z-index:10;
  position:relative;
  background-blend-mode: multiply;
}

.grid {
  display: grid;
  grid-template-columns: 50px 550px;
  grid-template-rows: 30px center;
  position: relative;
}

/* Estilo base para todos los cuadros */
.cuadro {
  border: 2px solid black;
  margin: -1px; /* Superposición de bordes */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  
}

/* Cuadro 1: Vertical, pegado abajo */
.uno {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
}

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: bottom;
  font-family: 'Courier Prime', monospace;
  font-weight: 300; /* Aseguras que use el peso Bold */
}

/* Cuadro 2: Derecha del primero, centrado, con padding */
.dos {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  text-align: center;
  padding: 60px;
  padding-top:70px;
  padding-bottom:40px;
  flex-direction: column;
}


/* Centramos el contenido vertical y horizontalmente */
.dos p {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Cuadro 3: Debajo del primero, texto "1" centrado */
.tres {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  justify-content: center;
  align-items: center;
  padding: 10px; 
  font-weight: bold;

}

/* Cuadro 4: Debajo del segundo, al lado del tercero, alineado a la izquierda */
.cuatro {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  font-family: 'Courier Prime', monospace;
  font-weight: 300; /* Aseguras que use el peso Bold */
    
}

HTML #

<div class="grid">
  <div class="cuadro uno">
    <div class="vertical-text">Título 1</div>
  </div>
  <div class="cuadro dos">
    <h4>PALABRA CLAVE 1</h4> <br>
    <h4>PALABRA CLAVE 2</h4><br>
    <h4>PALABRA CLAVE 3</h4><br>
    <h4>PALABRA CLAVE 4</h4><br>
    <h4>PALABRA CLAVE 5</h4><br>
    <h4>PALABRA CLAVE 6</h4><br>
    <h4>PALABRA CLAVE 7</h4><br>
    <h4>PALABRA CLAVE 8</h4><br>
  </div>
  <div class="cuadro tres">1</div>
  <div class="cuadro cuatro">Explicación</div>
</div>

响应式修改方案 #

针对固定像素导致的布局变形问题，以下是适配全屏幕尺寸的优化方案：

核心修改逻辑 #

• 用相对单位替换固定像素：rem（字体/内边距）、fr（网格列宽）、clamp()（动态字体缩放）
• 重构网格布局：第一列自适应内容宽度，第二列占满剩余空间
• 小屏幕自动切换单列布局，调整文本方向保证可读性

修改后的完整代码 #

.cuadro-valores {
  z-index: 10;
  position: relative;
  background-blend-mode: multiply;
}

.grid {
  display: grid;
  /* 第一列自适应内容，第二列占满剩余空间 */
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

/* Estilo base para todos los cuadros */
.cuadro {
  border: 2px solid black;
  margin: -1px; /* Superposición de bordes */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 动态字体：小屏14px，大屏16px */
  font-size: clamp(14px, 1.2vw, 16px);
}

/* Cuadro 1: Vertical, pegado abajo */
.uno {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-items: flex-end;
  justify-content: center;
  /* 相对内边距，随容器缩放 */
  padding-bottom: 1.2rem;
  min-width: 40px;
}

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Courier Prime', monospace;
  font-weight: 300;
}

/* Cuadro 2: Derecha del primero, centrado, con padding */
.dos {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  text-align: center;
  /* 百分比内边距，适配不同屏幕 */
  padding: 3% 5%;
  padding-top: 4%;
  padding-bottom: 2%;
  flex-direction: column;
}

.dos h4 {
  margin: 0.5rem 0;
  /* 关键字字体动态缩放 */
  font-size: clamp(15px, 1.5vw, 18px);
}

/* Cuadro 3: Debajo del primero, texto "1" centrado */
.tres {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  font-weight: bold;
}

/* Cuadro 4: Debajo del segundo, al lado del tercero, alineado a la izquierda */
.cuatro {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-content: flex-start;
  align-items: center;
  padding: 0.8rem;
  font-family: 'Courier Prime', monospace;
  font-weight: 300;
}

/* 小屏幕适配（768px以下） */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  
  .uno {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-items: center;
    padding-bottom: 0;
  }
  
  .vertical-text {
    writing-mode: horizontal-tb;
    transform: rotate(0);
  }
  
  .dos {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .tres {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  
  .cuatro {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    justify-content: center;
  }
}

效果说明 #

1. 自适应网格：grid-template-columns: auto 1fr避免固定宽度导致的溢出，第一列只占内容所需空间，第二列自动填充剩余宽度
2. 动态字体：clamp()实现字体随屏幕宽度平滑缩放，兼顾小屏可读性和大屏布局一致性
3. 小屏优化：768px以下切换为单列布局，垂直文本改为水平显示，所有内容居中对齐，避免挤压变形
4. 相对内边距：用rem和百分比代替固定px，保证内边距随容器和字体大小同步缩放

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