Css grid justify-self


why when i use justify-self the item disappear?

	width: 100%;
	height: 25vh;
	display: grid;
	grid-template-columns:  1fr 1fr;
	grid-template-rows:  1fr 1fr;
	grid-gap: 2vw;

	background-color: red;
	align-self: center;

	background-color: blue;

	background-color: green;



	<div class="container-main">
	<div class="box1-main"></div>
	<div class="box2-main"></div>
	<div class="box3-main"></div>

It doesn’t disappear, it’s just 0 height now. If you add 1px border you’ll see this invisible div. The default value of align-self is ‘stretch’ and the element fits all the grid cell. But you change it to ‘center’ and now it doesn’t stretch vertically any more. You have to define the height of this div element or add some content.

1 Like

Hey Tomer,
Whenever you post, make sure you post the link to challenge so that it is for us to help you.

1 Like