-1

 *{
box-sizing: border-box;
margin:0;
padding:0;
}

div.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr)  ;
  grid-gap: 1px;

  align-content: end;

  background-color: #059085;
  padding: 10px;
  color:#000;
  height:300px;
  width:300px;
  
}

div.grid-container  div.grid-item {
    min-width:100%;
    max-height: 25px;
    text-align: center;
    padding: 5px;
    margin: 3px;
    border: 2px solid white;
    color: white;
}

div.grid-container  div.grid-item:first-child {
    align-self: start;
}

#first-grid-item{
    align-self: start;
}
div.grid-container > #first-grid-item{
    align-self: start;
}
  <div class="grid-container">
      <div class="grid-item" id="first-grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
</div>
نور
  • 1,425
  • 2
  • 22
  • 38

1 Answers1

0

You have to replace align-content: end; with align-items: end; in your grid-container to able to achieve this.

EDIT :

The align-content property is used to vertically align the whole grid inside the container. On the other hand grid items are just boxes inside a grid container which controls the alignment on the block axis. So when align-itemsis used we control the position of the item within the grid area. So if you're looking to align only the first div to the top and the remaining to the bottom, using align-items: end; instead of align-content: end; is the way to go. Below is an example of it.

Here's more on align-items vs align-content

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 150px auto;  /* added */
  grid-gap: 1px;
  align-items: end;  /* added */
  background-color: #059085;
  padding: 10px;
  color: #000;
  /* height: 300px; */  /*removed*/
  width: 300px;
}

div.grid-container div.grid-item {
  min-width: 100%;
  max-height: 25px;
  text-align: center;
  padding: 5px;
  margin: 3px;
  border: 2px solid white;
  color: white;
}

div.grid-container div:first-child {
  align-self: start;
}
<div class="grid-container">
      <div class="grid-item" id="first-grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
</div>
Becky
  • 5,467
  • 9
  • 40
  • 73
  • how to achieve this using align-content? – Sandrin Joy Oct 05 '20 at 06:55
  • align items it's creating space between two row ... but align content did not create space between two row ....that's why i am using align content.. – نور Oct 05 '20 at 08:09
  • @Becky is there a way to remove space between two grid row on explicit grid or implicit gird ? – نور Oct 05 '20 at 08:28
  • 1
    use `grid-template-rows:` with `auto` instead of specifying a height to your `div.grid-container`. I just updated my answer now by placing comments infront of them for your understanding. Now the 2 rows will not show a space between them because the sencond row is having only its content height. – Becky Oct 05 '20 at 09:06