Css grid justify-self

HTML-CSS
1

hello

why when i use justify-self the item disappear?

<head>
<style>
.container-main{
	width: 100%;
	height: 25vh;
	display: grid;
	grid-template-columns:  1fr 1fr;
	grid-template-rows:  1fr 1fr;
	grid-gap: 2vw;
	
}

.box1-main{
	background-color: red;
	align-self: center;
	
}

.box2-main{
	background-color: blue;
}

.box3-main{
	background-color: green;
}

</style>

</head>


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

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
3

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

1 Like