Fix : 그리드 격자 업데이트

This commit is contained in:
KINDNICK 2025-09-21 23:44:20 +09:00
parent 803774af43
commit c82e332c41
4 changed files with 34 additions and 8 deletions

View File

@ -241,7 +241,7 @@
.values-grid { .values-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl); gap: var(--spacing-xl);
margin-top: var(--spacing-2xl); margin-top: var(--spacing-2xl);
} }
@ -313,6 +313,6 @@
} }
.values-grid { .values-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: 1fr;
} }
} }

View File

@ -154,7 +154,7 @@
.features-grid { .features-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl); gap: var(--spacing-xl);
margin-top: var(--spacing-2xl); margin-top: var(--spacing-2xl);
max-width: 1200px; max-width: 1200px;

View File

@ -615,9 +615,15 @@
/* 추가 옵션 */ /* 추가 옵션 */
.options-grid { .options-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl); gap: var(--spacing-xl);
margin-bottom: var(--spacing-2xl); margin-bottom: var(--spacing-2xl);
justify-items: center;
}
.options-grid .option-card:nth-child(3) {
grid-column: 1 / -1;
max-width: 500px;
} }
.option-card { .option-card {
@ -902,7 +908,7 @@
.specs-list { .specs-list {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm); gap: var(--spacing-sm);
justify-items: center; justify-items: center;
} }
@ -1420,7 +1426,21 @@
} }
.grid-3 { .grid-3 {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-2-1 {
grid-template-columns: repeat(2, 1fr);
}
.grid-2-1 .card:nth-child(3) {
grid-column: 1 / -1;
max-width: 600px;
margin: 0 auto;
} }
.card { .card {
@ -1515,11 +1535,17 @@
} }
.grid-2, .grid-2,
.grid-3 { .grid-3,
.grid-4,
.grid-2-1 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--spacing-lg); gap: var(--spacing-lg);
} }
.grid-2-1 .card:nth-child(3) {
max-width: none;
}
.card { .card {
margin-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);
padding: var(--spacing-xl); padding: var(--spacing-xl);

View File

@ -61,7 +61,7 @@
<h2>왜 밍글 스튜디오인가?</h2> <h2>왜 밍글 스튜디오인가?</h2>
<p>최고의 장비와 전문성으로 여러분의 프로젝트를 지원합니다</p> <p>최고의 장비와 전문성으로 여러분의 프로젝트를 지원합니다</p>
</div> </div>
<div class="features-grid grid grid-3"> <div class="features-grid grid grid-2-1">
<div class="feature-card card"> <div class="feature-card card">
<div class="feature-icon">🎬</div> <div class="feature-icon">🎬</div>
<h3>최첨단 OptiTrack 시스템</h3> <h3>최첨단 OptiTrack 시스템</h3>