.grid
	.grid__item
		div
			a(href="#")
				div.grid__detail
					h2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum autem molestiae deleniti nobis, fugit magni facere pariatur, similique, sequi tempore enim! Cupiditate iure doloremque qui eligendi maxime inventore veritatis ratione?
	.grid__item
		div
			a(href="#")
				div.grid__detail
					h2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum autem molestiae deleniti nobis, fugit magni facere pariatur, similique, sequi tempore enim! Cupiditate iure doloremque qui eligendi maxime inventore veritatis ratione?
	.grid__item
		div
			a(href="#")
				div.grid__detail
					h2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum autem molestiae deleniti nobis, fugit magni facere pariatur, similique, sequi tempore enim! Cupiditate iure doloremque qui eligendi maxime inventore veritatis ratione?
	//- .grid__item
	//- 	h2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum autem molestiae deleniti nobis, fugit magni facere pariatur, similique, sequi tempore enim! Cupiditate iure doloremque qui eligendi maxime inventore veritatis ratione?
	//- .grid__item
	//- 	h2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum autem molestiae deleniti nobis, fugit magni facere pariatur, similique, sequi tempore enim! Cupiditate iure doloremque qui eligendi maxime inventore veritatis ratione?
View Compiled
.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
}

.grid__item {
	// overflow: hidden;
	background-color: orange;
	position: relative;
	min-width: 0; // to resolve an issue with truncate text
	
	&:nth-child(2) {
		background-color: red;
	}
	&:nth-child(3) {
		background-color: yellow;
	}
	
	div {
		position: relative;
		box-shadow: 0 0 10px red;
	}
	
	a {
		display: block;
		width: 100%;
		height: 100%;
	}
}

h2 {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
}

.grid__detail {
	display: block;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.