Html Question posted in
Some basic documentation can be found here.

Html – how can I fit the words inside the grid without it being too small with a proper border

image of webpage

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.

Tags:

2

Answers


  1. 0 
    .unitgrid{grid-template-columns: auto auto auto auto auto auto auto auto auto;}

    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.

    Login or Signup to reply.
  2. 0

    Use grid-template-rows: repeat(2, 1fr);``grid-template-columns:repeat(9, 1fr); for class .unitgrid & remove all CSS for class unitgrid-items.

    * {
    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-rows: repeat(2, 1fr);
    grid-template-columns:repeat(9, 1fr);
    align-items: center;
    justify-content: space-evenly;
    align-content: space-evenly;
    border: 1px solid black;
}


.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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search