html - Is it possible to have a DIV fit responsive content of an unknown size in a grid? -
i'm trying create responsive css grid following specifications:
- responsive
- content blocks left aligned
- content wrapper fits content blocks (this part may not possible)
- content wrapper vertically , horizontally centered
- pure css
i have following code:
* { padding: 0; margin: 0; line-height: 1; box-sizing: border-box; } .tiles, .tile, .tile { padding: 10px; } body { background: blue; } .tiles { display: flex; flex-flow: flex; flex-wrap: wrap; background: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .tile { height: 100px; width: 100px; background: green; } .tile { display: block; height: 100%; background: yellow; }
<div class="tiles"> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> <div class="tile"> <a>item</a> </div> </div>
i've tried flex , floats, can't container div (.tiles - red) resize content when window resized.
is possible without javascript @ all?
thanks!
Comments
Post a Comment