On gists

full width in container

CSS CSS trick

index.html Raw #

<!--
https://jsbin.com/heqamezuju/edit?html,css,output
-->

	<grid>
		
		<item class="l">
			
			aaa
			
		</item>
		<item class="r">
			
			bbb
			
		</item>
	</grid>


  <style>
    grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 500px;
	outline: 2px solid gray;
	height: 500px;
	margin: auto;
	
}


item {
	padding: 10px;
}

.r, .l {
	position: relative;	
	isolation: isolate;
}

.r:after {
	background: lightgray;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50vw;
	position: absolute;
	content: "";
	z-index: -1;
}


.l:after {
	background: lightpink;
	top: 0;
	bottom: 0;
	right: 0;
	width: 50vw;
	position: absolute;
	content: "";
	z-index: -1;
}


    
  </style>

preview.md Raw #