Question posted in 
I am a newbie and tried to fit the texts in the grid but it’s either too small or not visible. I also tried to make a thin solid black border but the size of the border does not cover the whole grid cell. In ‘.unitgrid’ text inside the grid doesn’t fit and the border is not visible.
* {
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%;
}<body>
<div class="all">
<nav>
<div class="navbar">
<div class="nav-logo">
<div class="logo"></div>
</div>
<div class="nav-head ">
<h1>dstpp</h1>
</div>
<div class="nav-toggle">
translate
</div>
</div>
</nav>
<div class="panel">
<div class="panel-options">
<a href="#">Home</a>
<a href="#">e-service</a>
<a href="#">corporate link</a>
<a href="#">Plant link</a>
<a href="#">Important links</a>
<a href="#">Internet links</a>
<a href="#">About us</a>
</div>
</div>
<div class="sidegrid">
<div class="sidegrid-item">1</div>
<div class="sidegrid-item">2</div>
<div class="sidegrid-item">3</div>
<div class="sidegrid-item">4</div>
<div class="sidegrid-item">5</div>
<div class="sidegrid-item">6</div>
<div class="sidegrid-item">7</div>
<div class="sidegrid-item">8</div>
<div class="sidegrid-item">9</div>
<div class="sidegrid-item">10</div>
<div class="sidegrid-item">11</div>
<div class="sidegrid-item">12</div>
<div class="sidegrid-item">13</div>
<div class="sidegrid-item">14</div>
</div>
<div class="main-unit-wrapper">
<div class="maingrid">.</div>
<div class="desc-row">.</div>
<div class="unit">
<div class="unitgrid">
<div class="unitgrid-item-1">1</div>
<div class="unitgrid-item">unit-1</div>
<div class="unitgrid-item">unit-2</div>
<div class="unitgrid-item">unit-3</div>
<div class="unitgrid-item">unit-4</div>
<div class="unitgrid-item">unit-5</div>
<div class="unitgrid-item">unit-6</div>
<div class="unitgrid-item">unit-7</div>
<div class="unitgrid-item">Total</div>
<div class="unitgrid-item">10</div>
<div class="unitgrid-item">11</div>
<div class="unitgrid-item">12</div>
<div class="unitgrid-item">13</div>
<div class="unitgrid-item">14</div>
<div class="unitgrid-item">15</div>
<div class="unitgrid-item">16</div>
<div class="unitgrid-item">17</div>
<div class="unitgrid-item">18</div>
</div>
</div>
</div>
<div class="right-container">.</div>
</div>
</body>I tried adjusting the font size and border but it was too small and was not visible.
2
Answers
just replace this with your 20px code because size was to compressed it was not able to expand by replacing this with auto all elements of .gridunit will adjust automatically and equally.
Use
grid-template-rows: repeat(2, 1fr);``grid-template-columns:repeat(9, 1fr);for class.unitgrid& remove all CSS for classunitgrid-items.