fluid design for web page with grid tiles
-
27-10-2019 - |
Question
I want to create a grid layout for a webpage. It should consist of nine cells which fit exactly in the current browser window viewport. The center cell should have a fixed width and height and centered horizontally and vertically. All other cells are dynamically adjusted to fit the actual browser window size.
I would prefer a CSS only solution, maybe an open source CSS grid framework. jQuery is fine too, though.
Solution
Ok, got it myself: http://jsfiddle.net/alp82/TR6EY/
HTML:
<div id="container">
<div id="top">
<div id="top-left">
<h1>TOP LEFT</h1>
</div>
<div id="top-center">
<h1>TOP CENTER</h1>
</div>
<div id="top-right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div id="middle">
<div id="mid-left">
<h1>MID LEFT</h1>
</div>
<div id="center">
<h1>CENTER</h1>
</div>
<div id="mid-right">
<h1>MID RIGHT</h1>
</div>
</div>
<div id="bottom">
<div id="bot-left">
<h1>BOTTOM LEFT</h1>
</div>
<div id="bot-center">
<h1>BOTTOM CENTER</h1>
</div>
<div id="bot-right">
<h1>BOTTOM RIGHT</h1>
</div>
</div>
</div>
CSS:
html, body {
margin: 0px;
}
#container {
display: table;
width: 100%;
}
#container > div {
display: table-row;
}
#container > div > div {
display: table-cell;
vertical-align: middle;
}
#center {
width: 300px;
height: 200px;
}
h1 {
text-align: center;
}
JS:
$(document).ready(function() {
calculateHeights();
$(window).bind('load resize orientationchange', function() {
calculateHeights();
});
function calculateHeights() {
$('#top, #top > div, #bottom, #bottom > div').css({
'height' : (($(window).height() - $('#center').height()) / 2) + 'px',
'min-height' : (($(window).height() - $('#center').height()) / 2) + 'px'
});
}
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow