How to format a Grid inside the Div?

Question

How to format a Grid inside the Div?

Navigation

#1 by (2 votes)

0

Gentlemen, I'm trying to insert a grid inside my Divs, however it is in conflict with the top, as shown in the image, it follows a snippet of my code where the problem occurs.

I have the div row1 which is the top and the div row2 which is the bottom.

#row1{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
}

#row2{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
}

.container {
   width: 500px;
   height: 160px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-left:100px;
   float:left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

.container div {
   display: flex;
   justify-content: center;
   align-items: center;
}

.rel, .acu {
   grid-column: span 2;
   background-color: white;
}

HTML:

<div id="row1">

    <c:if test ="${realizadoSG <metaSG}">
    <div class="container">
       <div class="marca" ><h1>SAMSUNG</h1></div> 
       <div class="meta">META: <fmt:formatNumber value = "${SG.rows[0].META}" type="currency"/></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <fmt:formatNumber 
        value = "${realizadoSG}" type="currency"/></div>
    <div class="acu">ACUMULADO: <c:out value="${SG.rows[0].ACUMULADO}"/>%</div>

</div>

<div id="row2">

    <c:if test ="${realizadoAS <metaAS}">
    <div class="container">
       <div class="marca"><h1>ASUS</h1></div> 
       <div class="meta"><h1>META:<fmt:formatNumber value= "${AS.rows[0].META}" type = "currency"/></h1></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <h1> <fmt:formatNumber 
      value= "${realizadoAS}" type = "currency"/></h1></div>
    <div class="acu">ACUMULADO:<h1><c:out value="${AS.rows[0].ACUMULADO}"/>%</h1></div>


</div>

html5 css div

asked by anonymous 06.08.2018 / 16:44

1 answer

Number of co-occurrences in a matrix formatting for different screens, some do not work [duplicate]

score 2 · Answer 1

Your problem is probably here, forgot to close the div tag and comment where it should be closed, inside the container follows the correction

<div id="row1">

    <c:if test ="${realizadoSG <metaSG}">
    <div class="container">
       <div class="marca" ><h1>SAMSUNG</h1></div> 
       <div class="meta">META: <fmt:formatNumber value = "${SG.rows[0].META}" type="currency"/></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <fmt:formatNumber 
        value = "${realizadoSG}" type="currency"/></div>
    <div class="acu">ACUMULADO: <c:out value="${SG.rows[0].ACUMULADO}"/>%</div>
    </div><!--Falta essa tag -->

</div>

<div id="row2">

    <c:if test ="${realizadoAS <metaAS}">
    <div class="container">
       <div class="marca"><h1>ASUS</h1></div> 
       <div class="meta"><h1>META:<fmt:formatNumber value= "${AS.rows[0].META}" type = "currency"/></h1></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <h1> <fmt:formatNumber 
      value= "${realizadoAS}" type = "currency"/></h1></div>
    <div class="acu">ACUMULADO:<h1><c:out value="${AS.rows[0].ACUMULADO}"/>%</h1></div>
  </div><!--Falta essa tag -->

</div>

In css try this

#row1{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
   clear: both;
   padding: 50px 0;
}

#row2{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
   clear: both;
   padding: 50px 0;
}