How to improve my layout in HTML?

Question

How to improve my layout in HTML?

Navigation

#1 by (5 votes)

3

Gentlemen, I need to make the following rectangles in html, can you instruct me what the best option is?

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    
    background-size: cover;
}
.container {
    width: 380px;
    height: 160px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.container div {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rel, .acu {
    grid-column: span 2;
    background-color: red;
}

<div id="row1">

    <div class="container">
        <div class="marca">Felipe Cardoso</div> 
        <div class="meta">Meta</div>
        <div class="rel">Realizado</div>
        <div class="acu">100%</div>
    </div>
    
</div>

The closest thing I can get is that bit of code I'm using, but you want the format of the attached image, if you can tell me the ideal function to use in that case, thank you.

html

asked by anonymous 08.10.2018 / 14:24

1 answer

SQL Command in String MySQL Is it possible to call by OnClick a new Activity TextView?

score 5 · Accepted Answer

For this particular case, as I mentioned in the comment, I would indicate the flexbox and not grid , because as you can see in this question Grid will not give you the possibility to align the last item in the center container FlexBox + CSS GRID

Now about the template that I put together, the main thing is to use flex-grow , so that each part of .box has its size proportional to another, in case I used values 3, 2, and 1, this means that between the parts there is a ratio of the widths, which may vary depending on the size of the content inside the cell, since flex is flexible in relation to that.

In the label "on .box I used a pseudo element ::after on .p2 and with content:" " in> text that you need.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.jumbo {
	background-image: url(https://unsplash.it/600/300);
	background-size: cover;
}
.container {
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 1rem;
}
.box {
  width: calc(50% - 2rem);
  height: 2rem;
  margin: 1.5em 1em;
  box-sizing: border-box;
  border: 1px solid black;
  display: flex;
}
.p1, .p2, .p3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #ffffff;
}
.p1 {
  flex-grow: 3;
}
.p2 {
  flex-grow: 2;
  background-color: red;
  color: #fff;
  position: relative;
}
.p3 {
  flex-grow: 1;
}
.p2::after {
  content: "texto";
  width: 100%;
  height: 1.5em;
  position: absolute;
  top: -1.5em;
  left: 0;
  background-color: red;
  line-height: 1.5em;
  text-align: center;
  box-shadow: inset 0 0 0.2em rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 580px) {
  .box {
    width: calc(100% - 2rem);
  }
}

<div class="jumbo">
	<div class="container">
		<div class="box">
			<div class="p1">
			grow 3
			</div>
			<div class="p2">
			grow 2
			</div>
			<div class="p3">
			grow 1
			</div>
		</div>

		<div class="box">
			<div class="p1">
			texto1
			</div>
			<div class="p2">
			texto2
			</div>
			<div class="p3">
			texto3
			</div>
		</div>

		<div class="box">
			<div class="p1">
			texto1
			</div>
			<div class="p2">
			texto2
			</div>
			<div class="p3">
			texto3
			</div>
		</div>
	</div>
</div>

In order to do the responsive part you can use @media , see how it should stay there, in screens smaller than 580px each .box should occupy 100% of the container in>.