Html Question posted in
Some basic documentation can be found here.

Without changing the html code, make blocks adaptive to the content. Only due to styles

The blue block can use different heights, it may also not be in the document. Under the blue block, the news block…

Without changing the html document. Is it possible, using styles, to make the blue block be the height of its content, and the news be pressed against the blue block or be at the level of the red one, in case the blue block is not in the html

div {
  font-size: 20px;
  font-weight: bold;
}

.gl {
  display: grid;
  grid-template-columns: 500px 200px;
  gap: 20px;
}

.b_1 {
  aspect-ratio: 1;
  background: red;
}

.b_2 {
  background: blue;
}

.Content {
  background: #0caa27;
  padding: 10px;
}
<div class='gl'>
  <div class='b_1'>Blok_1</div>
  <div class='b_2'>Blok_2</div>
  <div class='Content'>Content</div>
  <div class='News'>News</div>
</div>

enter image description here

Tags:

2

Answers


  1. 0

    No, it’s not possible. To achieve your desired layout, your HTML requires a flex wrapper to combine .b_2 and .news. I have called this wrapper .sidebar.

    .sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

<div class='b_1'>Blok_1</div>
<div class='content'>Content</div>
<div class='sidebar'>
  <div class='b_2'>Blok_2</div>
  <div class='news'>News</div>
</div>

    A snippet to demonstrate:

    body {
  background: #eee;
  font-size: 20px;
  font-weight: bold;
  margin: 1em;
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: 1em;
}

.b_1, .b_2, .content, .news {
  padding: 0.5em;
}

.b_1 {
  aspect-ratio: 1;
  background: red;
}

.b_2 {
  background: blue;
}

.sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.content {
  background: #0caa27;
}
    <div class='b_1'>Blok_1</div>
<div class='content'>Content</div>
<div class='sidebar'>
  <div class='b_2'>Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2</div>
  <div class='news'>News</div>
</div>
    Login or Signup to reply.
  2. 0

    A bit hacky but doable

    div {
  font-size: 20px;
  font-weight: bold;
}

.gl {
  display: grid;
  grid-template-columns: 500px 200px;
  grid-template-rows: repeat(4,auto); /* 4 rows with auto height */
  align-content: start; /* make sure the rows are auto height*/
  gap: 20px;
}

.b_1 {
  aspect-ratio: 1;
  grid-row: span 3; /* take 3 rows */
  background: red;
}

.b_2 {
  background: blue;
  grid-area: 1/2; /* 1st row, 2nd column */
}
.News {
  grid-area: 2/2; /* 2nd row, 2nd column */
}

.Content {
  background: #0caa27;
  padding: 10px;
  grid-column: 1;
}
    <div class='gl'>
  <div class='b_1'>Blok_1</div>
  <div class='b_2'>Blok_2</div>
  <div class='Content'>Content</div>
  <div class='News'>News</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search