Блог

Главная - Вопросы по программированию - HTML текст изменяет ширину СТРОКИ СЕТКИ

HTML текст изменяет ширину СТРОКИ СЕТКИ

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

Итак, как объясняется в названии, у меня есть макет сетки, несколько пустых сеток, только с цветом, но я хочу, чтобы 2 ячейки были заполнены текстом (item23, пункт 17), проблема в том, что когда я меняю размер шрифта, он изменяет ширину строки, я смог исправить проблему с высотой с помощью строки-высота: 0; но не знаю, как исправить ширину. Я хочу, чтобы он был отзывчивым, если это возможно. посмотреть фрагмент:

 body{
    margin: 0;
    padding: 0;
    font-family: sans-serif bold;
}
.grid {
    display: grid;
    height: 100vh;
    width: 100vh;
    grid-template-areas:
    
    ". . . . . . a1 a1 . . ."  
    ". . . . . a2 a2 a3 a3 . ."    
    ". . . . a4 a5 a6 . . . ."    
    ". . . a7 a8 . . a9 a9 a10 a10"    
    ". . a11 a12 a13 a14 a14 a15 a16 . ."    
    ". . a17 a17 a17 a18 a18 a19 a19 a20 a20"   
    "a21 a22 a23 a23 a23 a23 a23 a23 a23 a24 ."    
    "a25 a25 a25 . . a26 a26 a27 a27 . ."    
    ". . a28 a29 a30 a31 a32 a33 . . ."   
    ". . . a34 a35 . . . . . ."    
    ". . . . a36 a37 . . . . .";
    
    grid-template-columns: repeat 11, 1fr!important;
    grid-template-rows: repeat 11, 1fr!important;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    background-color: #DEE1D5;
    gap: 0.5em;
    line-height: 0;
    ;
}
.grid_item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item1,.item5,.item6,.item9,.item12,.item13,.item15,.item16,.item24,.item25,.item34,.item26,.item35{
    background-color: #000009;
    min-width: 100/11vh;
    max-width: 100/11vh;
}
.item2,.item7,.item11,.item14,.item28,.item31,.item32,.item37{
    background-color: #00B2A1;
    min-width: 100/11vh;
    max-width: 100/11vh;
}
.item3,.item4,.item8,.item10,.item18,.item19,.item20,.item21,.item22,.item27,.item29,.item30,.item33,.item36{
    background-color: #ED1480;
    min-width: 100/11vh;
    max-width: 100/11vh;
}
.item1 {

grid-area: a1;
}
.item2 {

grid-area: a2;
}
.item3 {

grid-area: a3;
}
.item4 {

grid-area: a4;
}
.item5 {

grid-area: a5;
}
.item6 {

grid-area: a6;
}
.item7 {

grid-area: a7;
}
.item8 {

grid-area: a8;
}
.item9 {

grid-area: a9;
}
.item10 {
    grid-area: a10;
}
.item11 {
    grid-area: a11;
}
.item12 {
    grid-area: a12;
}
.item13 {
    grid-area: a13;
}
.item14 {
    grid-area: a14;
}
.item15 {
    grid-area: a15;
}
.item16 {
    grid-area: a16;
}
.item17 {
    grid-area: a17;
}
.item18 {
    grid-area: a18;
}
.item19 {
    grid-area: a19;
}
.item20 {
    grid-area: a20;
}
.item21 {
    grid-area: a21;
}
.item22 {
    grid-area: a22;
}
.item23 {
    
    font-size: 140px;
    justify-content: center;
    grid-area: a23;
    
}
.item24 {
    grid-area: a24;
}
.item25 {
    grid-area: a25;
}
.item26 {
    grid-area: a26;
}
.item27 {
    grid-area: a27;
}
.item28 {
    grid-area: a28;
}
.item29 {
    grid-area: a29;
}
.item30 {
    grid-area: a30;
}
.item31 {
    grid-area: a31;
}
.item32 {
    grid-area: a32;
}
.item33 {
    grid-area: a33;
}
.item34 {
    grid-area: a34;
}
.item35 {
    grid-area: a35;
}
.item36 {
    grid-area: a36;
}
.item37 {
    grid-area: a37;
}  
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="grid"><div class="grid_item item1"></div>
        <div class="grid_item item2"></div>
        <div class="grid_item item3"></div>
        <div class="grid_item item4"></div>
        <div class="grid_item item5"></div>
        <div class="grid_item item6"></div>
        <div class="grid_item item7"></div>
        <div class="grid_item item8"></div>
        <div class="grid_item item9"></div>
        <div class="grid_item item10"></div>
        <div class="grid_item item11"></div>
        <div class="grid_item item12"></div>
        <div class="grid_item item13"></div>
        <div class="grid_item item14"></div>
        <div class="grid_item item15"></div>
        <div class="grid_item item16"></div>
        <div class="grid_item item17">the</div>
        <div class="grid_item item18"></div>
        <div class="grid_item item19"></div>
        <div class="grid_item item20"></div>
        <div class="grid_item item21"></div>
        <div class="grid_item item22"></div>
        <div class="grid_item item23">sugarcubes</div>
        <div class="grid_item item24"></div>
        <div class="grid_item item25"></div>
        <div class="grid_item item26"></div>
        <div class="grid_item item27"></div>
        <div class="grid_item item28"></div>
        <div class="grid_item item29"></div>
        <div class="grid_item item30"></div>
        <div class="grid_item item31"></div>
        <div class="grid_item item32"></div>
        <div class="grid_item item33"></div>
        <div class="grid_item item34"></div>
        <div class="grid_item item35"></div>
        <div class="grid_item item36"></div>
        <div class="grid_item item37"></div>
        </div>
    </body>
</html>

Комментарии:

1. Попробуйте repeat(11,1fr) вместо repeat 11,1fr

2. нет, не сработало, но спасибо за это, я забыл об этом: D