How do I align text in top left corner of div?-CodePudding

Trying to align a number in the top left corner of a div square. Justify content is moving it correctly, but I can't seem to get align-items OR align-self to move the text vertically.

Thoughts? And thank you for your help

body{
   display: flex;
   justify-content: center;
   align-items: center;
}

.grid {
   margin: o;
   display: grid;
   grid-template-columns: repeat(10, 45px);
   gap: 10px;
   list-style-type: none;


}

.cell {
   display: flex;
   justify-content: left;
   align-self: flex-start;

   background-color: grey;
   height: 50px;
   width: 50px;
   border-style: solid;
   border-width: 2px;
   border-color: black;
}

CodePudding user response：

(I'll update my answer with more specific code samples, once you've shared your markup)

Option #1 - Absolute Positioning

.wrapper {
  position: relative;
  min-height: 300px;
  border: 2px dashed red;
}

.top-left {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  border: 2px dashed blue;
}

<div >
  <div >[123]</div>
</div>

Option #2 - Flex Layout

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  min-height: 300px;
  border: 2px dashed red;
}

.top-left {
  border: 2px dashed blue;
}

<div >
  <div >[123]</div>
</div>

Option #3 - Grid Layout

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 200px;
  border: 2px dashed red;
}

.top-left {
  grid-column-start: 1;
  grid-column-end: 1;
  border: 2px dashed blue;
}

.cell {
  border: 2px dashed yellow;
}

<div >
  <div >[123]</div>
  <div >[CELL]</div>
  <div >[CELL]</div>
  <div >[CELL]</div>
  <div >[CELL]</div>
  <div >[CELL]</div>
  <div >[CELL]</div>
  <div >[CELL]</div>
  <div >[CELL]</div>
</div>

CodePudding user response：

To vertically align the text in the top left corner of your .cell divs, you can use the align-items: flex-start property on the .cell class like this:

.cell {
   display: flex;
   justify-content: left;
   align-items: flex-start;
   background-color: grey;
   height: 50px;
   width: 50px;
   border-style: solid;
   border-width: 2px;
   border-color: black;
}

This will vertically align the content of the .cell divs along the top edge of the divs.