1

Let's say that I want to create a grid with four square <div> elements inside. I want to set the square sizes to a constant value, so even if a square will have content inside that is larger then the size of the square, the square will remain in the same size, and the content will not 'exit' the square.

To demonstrate the problem, I have created the example below. Thanks in advance! (:

codepen.io

#one { grid-area: "one"; }
#two { grid-area: "two"; }
#three { grid-area: "three"; }
#four { grid-area: "four"; }

#container {
  display: grid;
  grid-gap: 10px;

  width: 200px;
  height: 200px;

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

  grid-template:
    "one two"
    "three four";

  background: gray;
  color: white;
}

.square {
  background: black;
  white-space: nowrap; /* Not working... */
}
Original:
<div id="container">
  <div class="square" id="one"></div>
  <div class="square" id="two"></div>
  <div class="square" id="three"></div>
  <div class="square" id="four"></div>
</div>

<br />

Adding text:
<div id="container">
  <div class="square" id="one">
    <h1>Hello \:</h1>
  </div>
  <div class="square" id="two"></div>
  <div class="square" id="three"></div>
  <div class="square" id="four"></div>
</div>

<br />

Expected result:<br />
<img src="https://imgur.com/xWpRShk.png" />
RealA10N
  • 120
  • 1
  • 5
  • 19
  • (1) grid-template-areas should be defined before grid-template columns (2) you have to consider minmax(0,1fr) instead of 1fr (3) you don't need to use quotes with grid area ... (4) no need both grid area and grid-column, choose one of them [added a duplicate for each issue + an extra one to show you how to correctly do square with grid] – Temani Afif Jun 28 '20 at 20:13
  • This didn't answer my question... I have used squares just as an example, but my problem is related to any css grid. How can I make a grid element stay in a certain size even when the content inside is larger? @TemaniAfif – RealA10N Jun 28 '20 at 20:36
  • as I said *(1) grid-template should be defined before grid-template columns (2) you have to consider minmax(0,1fr) instead of 1fr* – Temani Afif Jun 28 '20 at 20:45
  • I also said *(3) you don't need to use quotes with grid area* – Temani Afif Jun 28 '20 at 20:48
  • Or (1') replaced grid-template with grid-template-areas – Temani Afif Jun 28 '20 at 20:57

0 Answers0