Posts em grid

[Sherlock02 0]

Olá!

 

Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.

(Vou anexar uma imagem para exemplificar o que desejo).

 

Segue o código:

.post:first-child{width:100%;position:relative;}
.post{margin-bottom:60px;width:48.8%;float:left;background:#eee}
.post:nth-child(2n+2){margin-right:30px;}

 

<div  id='mainwrapper'>

<div class="post">
  <div class="post-entry">
       1 Post com width 100%. Here goes my post.
  </div>
</div>

<div class="post">
  <div class="post-entry">
       2. Post com width 48%. Here goes my post.
  </div>
</div>

<div class="post">
  <div class="post-entry">
       3. Post com width 48%. Here goes my post.
  </div>
</div>

  </div><!-- mainwrapper-->

Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.

 

Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.

Obrigada!

[Omar~ 87]

Não seu o que você quis dizer com isso:

Em 02/11/2019 at 12:16, Sherlock02 disse:

o post da direita não "gruda" no canto

 

Porém olhando a imagem e o código CSS apresentado, deduzo é que o post da direita não fica na direita e sim empilha.

O fato disso acontecer é pela alta de espaço no documento para alinhar cada um.

Pelo fato de ter definido seu width:48.8% e  uma margem de 30 pixels hora que isso ultrapassou os 100% da extensão do documento.

Bom para deixar conforme a imagem:

.post:first-child{width:100%;position:relative}
.post {
  margin: 0 15px 60px;
  width:calc(48.8% - 30px);
  float:left;
  background:#eee
}
/* Isso se torna desnecessário
.post:nth-child(2n+2){margin-right:30px;}
*/

 

 

[Sherlock02 0]

Olá, muito obrigada.

Eu acabei conseguindo, mas de outra maneira.

Vou deixar aqui o código:

#mainwrapper{width:900px;margin: 0 auto;background:violet;height:100px;}
.post:first-child{width:100%;}
.post{background:#eee;width: calc(50% - 15px);float:left;}
.post:nth-child(even){margin-right:30px;}

 

<div id='mainwrapper'>

<div class="post">
  <div class="post-entry">
       1 Post com width 100%. Here goes my post.
  </div>
</div>

<div class="post">
  <div class="post-entry">
       2. Post com width 50%. Here goes my post.
  </div>
</div>

<div class="post">
  <div class="post-entry">
       3. Post com width 50%. Here goes my post.
  </div>
</div>
  
<div class="post">
  <div class="post-entry">
       4. Post com width 50%. Here goes my post.
  </div>
</div>

<div class="post">
  <div class="post-entry">
       5. Post com width 50%. Here goes my post.
  </div>
</div>
  
  </div><!-- mainwrapper-->

 

Obrigada e abraços!