OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Unable to fit elemets with CSS grid [closed]

  • Thread starter Thread starter fishypanda
  • Start date Start date
F

fishypanda

Guest
I am a newbie and tried to fit the texts in the grid but it's either going to the next line or not visible. In class '.unitgrid' text inside the grid doesn't behave according to applied properties.
Also if there is any other way to shorten the current CSS grid-template-rows: & grid-template-column: property will be helpful.


Code:
* {
    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%;
}

Code:
<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.
<p>I am a newbie and tried to fit the texts in the grid but it's either going to the next line or not visible. In class '.unitgrid' text inside the grid doesn't behave according to applied properties.<br />
Also if there is any other way to shorten the current CSS <code>grid-template-rows:</code> & <code>grid-template-column:</code> property will be helpful.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre>
</div>
</div>
</p>
<p>I tried adjusting the font size and border but it was too small and was not visible.</p>
Continue reading...
 

Latest posts

D
Replies
0
Views
1
Dhanushka Amarakoon
D
S
Replies
0
Views
1
Shikhar Ambashta
S
Top