Supergrid

wolf · 8. Februar 2015

Ich weiß nichtmehr weiter..

Wie könnte ich so ein Layout umsetzen?:

Code

+-----+-----+-----+-----+-----+-----+-----+
|     |     |     |     |     |     |     |
|     |     |     |     |     |     |     |
+-----+-----+-----+-----+-----+-----+-----+
|     |     |           |     |     |     |
|     |     |           |     |     |     |
+-----+-----+           +-----+-----+-----+
|     |     |           |     |     |     |
|     |     |           |     |     |     |
+-----+-----+-----+-----+-----+-----+-----+
|           |     |     |     |           |
|           |     |     |     |           |
|           +-----+-----+-----+           |
|           |     |     |     |           |
|           |     |     |     |           |
+-----+-----+-----+-----+-----+-----+-----+
|     |     |     |     |     |     |     |
|     |     |     |     |     |     |     |
+-----+-----+-----+-----+-----+-----+-----+

Alles anzeigen

Problem ist das float und auch Flexbox soweit ich weiß Spalten/Zeilen orientiert sind.. die großen Boxen sollen auch dynamisch zu kleinen Boxen werden können..
Und die kleinen auch zu großen..
Es ist ein bisschen so wie Win8 Kacheln.. xx

Versteht ihr?
Wisst ihr (vllt auch Javascript) lösungen?

Nitamud · 8. Februar 2015

Für Windows 8 ähnlichen Layouts gibt es ein Framework names Metro UI Css, das auf LESS basiert. Ich hatte damit noch nie etwas zu tun, abervlt ist es das was du suchst:-)

wolf · 8. Februar 2015

Okay, danke, werde es mal anschaun

Habe eine Möglichkeit gefunden es zumindest so ausschauen zu lassen..

CSS

transform: scale(2) translate(25%,25%);

.. ist aber nicht das wahre

.. http://codepen.io/wolf-w/pen/xbPaEe

Nitamud · 8. Februar 2015

Bin auf der suche nach einer reinen Flexbox-Lösung,melde mich später mit dem Ergebnis

Basi · 8. Februar 2015

Bei "Wie die Win8 Kacheln" denke ich natürlich sofort an w3c's von MS übernommene Idee des grid-Layouts (leider bisher nur IE Support aber vielleicht reicht das ja auch? )

Nitamud · 9. Februar 2015

So wolf,

ich hab dein obiges Layout mal mit Flexbox umgesetzt :

HTML

<body>	





		
		<!--Leerzeile am Ende-->

		<div class="container small">


			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>


		</div>

		<!--Ende Leerzeile-->

		<!--Erste Reihe -->
		<div class="container">

			<div class="klein">

				<div></div>
				<div></div>




			</div>


			<div class="klein">

				<div></div>
				<div></div>




			</div>

			<div class="gross"></div>


			<div class="klein">

				<div></div>
				<div></div>




			</div>

			<div class="klein">

				<div></div>
				<div></div>




			</div>


			<div class="klein">

				<div></div>
				<div></div>




			</div>





		</div>
		<!--Ende Erste Reihe-->





		<!--Beginn Zweite Reihe-->
		<div class="container">




		<div class="gross"></div>


			<div class="klein">

				<div></div>
				<div></div>




			</div>

			<div class="klein">

				<div></div>
				<div  ></div>

			</div>

			<div class="klein">

				<div  ></div>
				<div></div>




			</div>


			<div class="gross"></div>

		</div>
		<!---Ende Zweite Reihe-->


		<!--Leerzeile am Ende-->

		<div class="container small">


			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>


		</div>

		<!--Ende Leerzeile-->






</body>
</html>

Alles anzeigen

CSS

* {




	margin: 0; 
	padding: 0;

}






	/*Standard Flexbox mit 2 Blöcken Höhe*/

	.container {
		background-color: black;

		display: -webkit-flex;
		display: -ms-flex;
		display: flex;

		height: 33.33vh;

		width: 100%;


}
	/* Spezialklasse für Flexboxen mit 1nem Block Höhe*/

	.small {

		height: 16.66vh;

	}

	.small div{

		-webkit-flex: 1; 	
		-ms-flex: 1;
		flex: 1;
		float: left;
		background-color: red;
		outline: 2px solid black;

	}



	/* Layout für die 2*2 Blöcke */

	.gross{

		background-color: green;
		-webkit-flex: 2; 	
		-ms-flex: 2;
		flex: 2;


		outline: 2px solid black;



	}

	/* Layout für die 1*1 Blöcke*/
	.klein {

		background-color: #BABABA;
		-webkit-flex: 1; 	
		-ms-flex: 1;
		flex: 1;

		height: 100%;








	}



	.klein div {

		width: 100%;
		height: 50%;
		float: left;
		outline: 2px solid black;



		background-color: red;



	}

Alles anzeigen

Lifedemo: http://codepen.io/Nitamud/pen/EabrOZ

bzw. hintergrundfarbenfrei:

http://codepen.io/Nitamud/pen/OPOddd

Herausgekommen ist eine gar wilde Suppe aus Divs , aber das Layout steht

Wie stellst du dir denn das mit dem Ändern per JS vor? Habe dort noch nicht genau verstanden, wie du das planst

mfg Nita

Supergrid

Jetzt mitmachen!

Teilen