Как я могу добиться этого макета, используя CSS сетку? - PullRequest
Новая
       7

Как я могу добиться этого макета, используя CSS сетку?

0 голосов
/ 10 июля 2020

Я пытаюсь получить этот макет, используя CSS Grid.

enter image description here

Currently, I am having trouble positioning the "Sub Title" below the "Main Title".

When I position the "Sub Title" below the "Main Title", a ton of white space is added below the "Sub Title" like the picture below. I commented the lines of code that causes this error.

image 

* {
  margin: 0; 
  padding: 0;
}


img {
  max-width: 100%;
}


.grid {
  display: grid;
  grid-template-columns: 350px 3fr;
  grid-template-rows: auto 1fr auto;
    
  grid-template-areas:
    "img h1"
    "img p"
      
       
 
/* My attempt of achieving the layout */ 
/* White space is added below the Subtitle for some reason  */

/*   grid-template-areas:
    "img h1"
    "img h2"
    "img p"  */
  
}


img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
<div class="grid">

  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">

  <h1>Main Title</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
    Praesent quis risus id dolor venenatis condimentum.</p>
    
  <h2>Sub Title</h2>

</div>

Ответы [ 2 ]

1 голос
/ 10 июля 2020 
grid-template-columns: 350px 3fr;
grid-template-rows: auto 1fr auto;

является избыточным, если у вас есть grid-template-areas, поскольку он автоматически вставляет необходимое количество строк и столбцов.

Не касаясь вашего html, вы можете добавить еще одну строку row в grid-template-areas свойство- 

* {
  margin: 0; 
  padding: 0;
}

img {
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-areas:
    "img h1"
    "img h2"
    "img p"
    "img ."      
}

img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
<div class="grid">

  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">

  <h1>Main Title</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
    Praesent quis risus id dolor venenatis condimentum.</p>
    
  <h2>Sub Title</h2>

</div>

. вставляет пустой столбец, который хорошо выполняет вашу работу.

0 голосов
/ 10 июля 2020

Вы можете разделить ваш контент на 2 отдельных div, как показано ниже. Это делает такие вещи намного проще. Ссылка -----> https://getbootstrap.com/ 

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        * {
  margin: 0; 
  padding: 0;
}


img {
  max-width: 100%;
}


.grid {
  display: grid;
  grid-template-columns: 350px 3fr;
  grid-template-rows: auto 1fr auto;
    
  grid-template-areas:
    "img h1"
    "img p"
      
       
 
/* My attempt of achieving the layout */ 
/* White space is added below the Subtitle for some reason  */

/*   grid-template-areas:
    "img h1"
    "img h2"
    "img p"  */
  
}


img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
    </style>
</head>
<body>
<div class="grid">
    <div id="content1">
        <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">
    </div>
    <div id="content2">
        <h1>Main Title</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
        Praesent quis risus id dolor venenatis condimentum.</p>
        
      <h2>Sub Title</h2>
    </div>

</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...