grid-min-max-content.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"			"http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Grid Layout</title><link rel="stylesheet" type="text/css" href="c/style-insert-tests.css"><style type="text/css">div {position: relative;}div[id]::before {content: "#" attr(id);	position: absolute; bottom: 100%; right: 100%;	transform-origin: 100% 100%; transform: rotate(-90deg);	background: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(255,0,0,0.5) 67%, rgba(255,0,0,0.95));	padding: 0.25em 0.75em; margin-bottom: 2px;	font: bold 1em "Consolas", "Courier New", monospace;}</style><style type="text/css" id="tests">.gallery {display: grid; margin: 2em; border: 2px solid red;}#g1 {grid-template-columns: max-content max-content max-content max-content;	grid-template-rows: max-content max-content max-content;}#g2 {grid-template-columns: min-content min-content min-content min-content;	grid-template-rows: max-content max-content max-content;}#g3 {grid-template-columns: max-content max-content max-content max-content;	grid-template-rows: min-content min-content min-content;}#g4 {grid-template-columns: min-content min-content min-content min-content;	grid-template-rows: min-content min-content min-content;}span {border: 1px solid gray; padding: 0.25em;}img {display: block;}img.wide {width: 90px; height: 60px;}img.tall {width: 60px; height: 90px;}img.big {width: 90px; height: 90px;}</style></head><body><div class="gallery" id="g1"><span> <img src="i/tester.jpg" alt="" class=""> Fancy icon</span><span> <img src="i/tester.jpg" alt="" class="wide"> A wide shot </span><span> <img src="i/tester.jpg" alt="" class=""> Very captional, with a twist</span><span> <img src="i/tester.jpg" alt="" class="tall"> A portrait in yellow</span><span> <img src="i/tester.jpg" alt="" class=""> Simple icon</span><span> <img src="i/tester.jpg" alt="" class=""> Medicore icon</span><span> <img src="i/tester.jpg" alt="" class="big"> The Big Kahuna</span><span> <img src="i/tester.jpg" alt="" class="wide"> This caption intentionally left blank</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> The only caption in its row</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> </span></div><div class="gallery" id="g2"><span> <img src="i/tester.jpg" alt="" class=""> Fancy icon</span><span> <img src="i/tester.jpg" alt="" class="wide"> A wide shot </span><span> <img src="i/tester.jpg" alt="" class=""> Very captional, with a twist</span><span> <img src="i/tester.jpg" alt="" class="tall"> A portrait in yellow</span><span> <img src="i/tester.jpg" alt="" class=""> Simple icon</span><span> <img src="i/tester.jpg" alt="" class=""> Medicore icon</span><span> <img src="i/tester.jpg" alt="" class="big"> The Big Kahuna</span><span> <img src="i/tester.jpg" alt="" class="wide"> This caption intentionally left blank</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> The only caption in its row</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> </span></div><div class="gallery" id="g3"><span> <img src="i/tester.jpg" alt="" class=""> Fancy icon</span><span> <img src="i/tester.jpg" alt="" class="wide"> A wide shot </span><span> <img src="i/tester.jpg" alt="" class=""> Very captional, with a twist</span><span> <img src="i/tester.jpg" alt="" class="tall"> A portrait in yellow</span><span> <img src="i/tester.jpg" alt="" class=""> Simple icon</span><span> <img src="i/tester.jpg" alt="" class=""> Medicore icon</span><span> <img src="i/tester.jpg" alt="" class="big"> The Big Kahuna</span><span> <img src="i/tester.jpg" alt="" class="wide"> This caption intentionally left blank</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> The only caption in its row</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> </span></div><div class="gallery" id="g4"><span> <img src="i/tester.jpg" alt="" class=""> Fancy icon</span><span> <img src="i/tester.jpg" alt="" class="wide"> A wide shot </span><span> <img src="i/tester.jpg" alt="" class=""> Very captional, with a twist</span><span> <img src="i/tester.jpg" alt="" class="tall"> A portrait in yellow</span><span> <img src="i/tester.jpg" alt="" class=""> Simple icon</span><span> <img src="i/tester.jpg" alt="" class=""> Medicore icon</span><span> <img src="i/tester.jpg" alt="" class="big"> The Big Kahuna</span><span> <img src="i/tester.jpg" alt="" class="wide"> This caption intentionally left blank</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> The only caption in its row</span><span> <img src="i/tester.jpg" alt="" class=""> </span><span> <img src="i/tester.jpg" alt="" class=""> </span></div></body></html>