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

Html – In the CSS Grid layout, how does the sub-element be set to non-automatic scaling?

<div class="demo1">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet ...</p>
</div>

<div class="demo2">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum.</p>
</div>

* {
  margin: 0;
  padding: 0;
}

.demo1,
.demo2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
}

.demo1 {
  margin-bottom: 50px;
}

.demo1 .des {
  grid-area: 2/1/3/3;
}

.demo2 .des {
  grid-area: 1/1/3/2;
}

When i use css gird layout, i have some questions.

How to set .text1 & .text2 element width or height not auto scaling？

I want to their width or height equal content width or height.

Please help me，thank you.

Tags:

2

Answers


  1. 0

    You can do that by using aspect-ratio:

    .text1, .text2 {
  aspect-ratio: 1;
}

/* extra styles to highlight boxes*/
.text1 {background-color: #f7f7f7;}
.text2 {background-color: #e7e7e7;}

* {
  margin: 0;
  padding: 0;
}

.demo1 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  margin-bottom: 50px;
}

.demo1 .des {
  grid-area: 2/1/3/3;
  background-color: #d7d7d7;
}
    <div class="demo1">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet ...</p>
</div>
    Login or Signup to reply.
  2. 0

    I believe you are asking how to set .text1 & .text2 so that the width and height are equal to its contents. Use width: fit-content

    .demo1,
.demo2 {
  width: fit-content;
}

    Info about fit-content
    Can I use width: fit-content? is showing 95% global support.

    * {
  margin: 0;
  padding: 0;
}

.demo1,
.demo2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  width: fit-content;
}

.demo1 {
  margin-bottom: 50px;
}

.demo1 .des {
  grid-area: 2/1/3/3;
}

.demo2 .des {
  grid-area: 1/1/3/2;
}
    <div class="demo1">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet ...</p>
</div>

<div class="demo2">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search