Невозможно разместить элементы с помощью сетки CSS [закрыто] ⇐ CSS

[Anonymous]

Я новичок и пытался разместить текст в сетке, но он либо переходит на следующую строку, либо не виден. В классе .unitgrid текст внутри сетки не ведет себя в соответствии с примененными свойствами.

А также, если есть какой-либо другой способ сократить текущие строки CSS-шаблона сетки: & Свойство Grid-template-column: будет полезным.

Код: Выделить всё

* {
margin: 0;
font-family: arial;
border: border-box;
background-color: rgb(225,241,253);
}

/* .all{
height: 100vh;
width: 100vw;
background-color: rgb(225,241,253);
}  */

.navbar {
display: flex;
background-color: #f6f8fb;
color: #0e0d0d;
height: 80px;
display: flex;
align-items: center;
justify-content: space-evenly;
}

.nav-logo {
height: 50px;
width: 110px;
}

.navbar .nav-head h1 {
background-color: white !important;
padding: 0;
margin: 0;
border: none;
}

.panel .panel-options a{
background-color:  rgb(0,65,90);
}

.logo {
background-image: url("amazon_logo.png");
background-size: cover;
background-color: #0e0d0d;
height: 50px;
width: 100%;
}

.nav-head {
display: flex;
justify-content: center;
width: 420.13px;
height: 40px;
border-radius: 4px;
font: 14px;
}

.panel {
height: 30px;
display: flex;
color: white;
background-color:rgb(0,65,90) ;
justify-content: space-evenly;
align-items: center;
background-color: rgb(0,65,90);
}

.panel-all {
font-size: 0.9rem;
font-weight: 700;
}

.panel-options a{
font-size: 0.9rem;
display: inline;
margin-left: 10px;
text-decoration: none;
background-color: rgb(0,65,90);
color: white;
}

.sidegrid{
width: 160px;
height: 499px;
background-color: rgb(225,241,253);
padding-left: 100px;
display: grid;
grid-template-rows: 29px 29px 29px 29px 29px 29px;
grid-template-columns: 29px 29px;
row-gap: 51px;
column-gap: 53px;
transform: translate(0, 2.4%);

}

.sidegrid-item{
width: 78px;
height: 78px;
background-color: white;
border-radius: 4px;
}

/*.unit{
height:100px;
width: 600px;
margin-left: 440px;
background-color: white;
left: 50%;
top: calc(50% + 200px)
}*/

.unitgrid{
height:50px;
width: 600px;
margin-left: 440px;
background-color: white;
left: 50%;
transform: translate(-18%, -240%);
top: calc(50% + 200px);
display: grid;
grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px;
grid-template-rows: 20px 20px;
align-items: center;
justify-content: space-evenly;
align-content: space-evenly;
border: 1px solid black;
}

.unitgrid-item {
height: 4px;
width: 10px;
}

.maingrid{
display: flex;
height: 300px;
width: 600px;
background-color: white;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 21%;
}

.right-container {
height: 240px;
width: 200px;
background-color: white;
position: absolute;
left: 74.4%;
top: 21%;
}

Код: Выделить всё

dstpp

translate





[url=#]Home[/url]
[url=#]e-service[/url]
[url=#]corporate link[/url]
[url=#]Plant link[/url]
[url=#]Important links[/url]
[url=#]Internet links[/url]
[url=#]About us[/url]



1
2
3
4
5
6
7
8
9
10
11
12
13
14


.
.


1
unit-1
unit-2
unit-3
unit-4
unit-5
unit-6
unit-7
Total
10
11
12
13
14
15
16
17
18



.

Я пытался настроить размер шрифта и рамку, но он был слишком маленьким и не видно.

Подробнее здесь: https://stackoverflow.com/questions/786 ... h-css-grid