Problem with the background in 2 columns, css grid

Question

Problem with the background in 2 columns, css grid

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I want to create two full width columns as you can see in the image with css grid. I have managed to do it, the detail is that I put a width to the box of the son and I try to align it to the center and I get spoiled.

You can see the code here. link

.columnas {
  display: grid;
  grid-template-columns:repeat(2,1fr);
  min-height: 350px;
}

.columna1 {
  background-color: orange;
  justify-self:end;
}

.columna2 {
  background-color: skyblue;
}

.content-columm {
  width: 350px;
}

body {
  padding: 0;
  margin: 0;;
}

<div class="columnas">
  <div class="columna1">
    <div class="content-columm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae illum.</div>
  </div>
  <div class="columna2">
    <div class="content-columm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
    </div>
</div>
</div>

(execute it in full screen to see the problem)

What can I be doing wrong? Can someone explain to me? Thank you very much.

css scss css-grid-layout grid

asked by Jhoedram 29.03.2018 в 23:45

source

3 answers

The data is not shown in the listview with SQLite (Android studio) Apply AJAX to an input and table without repeating it

score 0 · Answer 1

0

I hope I have understood your problem ...

Modify your class:

From

.content-columm {
  width: 350px;
}

a

 .content-columm {
      width: auto;
    }

answered by 30.03.2018 в 00:21

score 0 · Answer 2

You can try the following styles:

* {
    padding: 0;
    margin: 0;
}

.columnas {
    display: grid;
    grid-template-columns: auto auto;
    min-height: 350px;
}

.columna1 {
    background-color: orange;
}

.columna2 {
    background-color: skyblue;
}

.content-columm {
    background: grey; /* para ver espacio ocupado por el contenido */

    margin: 10% 0 0 10%;
    width: 80%;
}

The alignment to the center of the contents of the boxes can be achieved by using margins in class .content-columm . With a width in this you control the space you want the content to occupy. Use percentages in the margins and width that you indicate to maintain the responsive.

PS: I have moved your styles for body at the beginning using a universal selector to reset all the elements.

score 0 · Answer 3

the issue is that not because the parent item is grid the children will be, so the problem is that, the children who need it must also be grid and all the css necessary for it, I leave the result

body {
  padding: 0;
  margin: 0;;
}

.columnas {
  display: grid;
  grid-template-columns:repeat(2,1fr);
}

.columna1 {
  display: grid;
  background-color: #DC5437;
  color:white;
  text-align: center;
  justify-items: center;
}

.columna2 {
  background-color: skyblue;
  
}

.columna1 .content-columm{
      width: 80%;
}

<div class="columnas">
  <div class="columna1">
    <div class="content-columm"><h1>Allan loves Groove. Here’s why…</h1>
      <h3>We’ve tried everything, from Gmail on up to the enterprise level products. Nothing felt right until we found Groove.</h3> 
      <p>Allan Branch of Less Accounting</p>
      <a href="#">More customer stories</a>
    </div>
  </div>
  <div class="columna2">
    <div class="content-columm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
    </div>
  </div>
</div>