<div class="grid stripes-background"> <div>grid item1</div> <div>grid item2</div> </div> <div class="flex stripes-background"> <div>flex item1</div> <div>flex item2</div> </div>
.stripes-background { background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff); background-size: 50px 50px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .flex { background-color: yellow; display: flex; } .grid div, .flex div { border: 1px solid black; width: 50%; background-color: rgba(0, 256, 0, 0.7); }