I have tried to make it look like the below picture, but I can not do it.
Everytime he put it right on or under the big col -.-
Grid System Picture I Want
Here is my code:
.row {
margin-top: 0.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 1 8%;
margin: 0 0 0.5rem 0;
padding: 0.5em 10px;
box-sizing: border-box;
}
/* nested grids */
.row .row, .row.nested {
flex: 1 1 auto;
margin-top: -0.5em;
}
/* full width grids */
.row.wide-fit {
margin-left: -10px;
margin-right: -10px;
}
/* center grids */
.row.center {
justify-content: center;
}
.center .col {
flex-grow: 0;
flex-shrink: 0;
}
/* columns widths */
.col-span-1 {
flex-basis: 8.3333%;
}
.col-span-2 {
flex-basis: 16.6666%;
}
.col-span-3 {
flex-basis: 25%;
}
.col-span-4 {
flex-basis: 33.3333%;
}
.col-span-5 {
flex-basis: 41.6666%;
}
.col-span-6 {
flex-basis: 50%;
}
.col-span-7 {
flex-basis: 58.3333%;
}
.col-span-8 {
flex-basis: 66.6666%;
}
.col-span-9 {
flex-basis: 75%;
}
.col-span-10 {
flex-basis: 83.3333%;
}
.col-span-11 {
flex-basis: 91.6666%;
}
.col-span-12 {
flex-basis: 100%;
}
/* examples */
.fixed-width {
flex: 0 0 500px;
background-color: rgba(255,0,0,0.1) !important;
}
#media all and (max-width: 568px) {
.col-span-1,
.col-span-2,
.col-span-3,
.col-span-4,
.col-span-5 {
flex-basis: 50%;
}
.col-span-6,
.col-span-7,
.col-span-8,
.col-span-9,
.col-span-10,
.col-span-11 {
flex-basis: 100%;
}
.nested .col {
flex-basis: 100%;
}
}
/* eye candy */
body {
font-family: sans-serif;
}
.row {
background-color: #cccccc;
background-color: rgba(0,0,0,0.1);
}
.col {
background-color: #999999;
background-color: rgba(0,0,0,0.2);
background-clip: content-box;
border: 1px solid rgba(0,0,0,0.1);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Grid System</title>
<link rel="stylesheet" href="css/fb-grid.css">
</head>
<body>
<div class="row">
<div class="col col-span-8">1</div>
<div class="col col-span-2">2</div>
<div class="col col-span-2">3</div>
<div class="col col-span-4">4</div>
<div class="col col-span-4">5</div>
<div class="col col-span-4">6</div>
</div>
</body>
</html>
Does anyone have any suggestions ?
HTML code will looks like
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Grid System</title>
<link rel="stylesheet" href="css/fb-grid.css">
</head>
<body>
<div class="row">
<div class="col col-span-8">1</div> <!-- give required height-->
<div class="col col-span-4">
<div class="col col-span-12">2</div><!--code change-->
<div class="col col-span-12">3</div><!--code change-->
</div>
<div class="col col-span-4">4</div>
<div class="col col-span-4">5</div>
<div class="col col-span-4">6</div>
</div>
</body>
</html>
Related
I'm trying to make a layout design for my webpage, but it's a little complex to build that design responsive.
I have hidden the sidebar using media query but still struggling with flex-order.
in desktop, it looks like this, and I have achieved this design using flexbox
but I'm trying in mobo device it should look like this
How should I add a media query to rearrange items. I'm new to flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 100%;
margin: 0;
}
.conatiner{
display: flex;
}
.sidebar{
max-width: 30%;
width: 100%;
height: 100vh;
background-color: blue;
}
.main{
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper-1{
display: flex;
}
.item-1{
background-color: blanchedalmond;
width: 70%;
height: 200px;
}
.item-2{
background-color: chartreuse;
width: 30%;
height: 200px;
}
.item-3{
background-color: darkcyan;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</body>
</html>
i tweeked a little bit your code and it is probably solve yor problem
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 100%;
margin: 0;
}
.conatiner {
display: flex;
height: 100vh;
}
.sidebar {
max-width: 30%;
width: 100%;
background-color: blue;
}
.main {
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper-1 {
display: flex;
flex-wrap: wrap;
}
.item-1 {
background-color: blanchedalmond;
width: 70%;
height: 200px;
flex: 0 0 50%;
}
.item-2 {
background-color: chartreuse;
width: 30%;
height: 200px;
flex: 0 0 50%;
}
.item-3 {
background-color: darkcyan;
width: 100%;
height: 300px;
flex: 1;
}
#media only screen and (max-width: 480px) {
.sidebar {
display: none;
}
.wrapper-1 {
flex-direction: column;
}
.item-1 {
order: 1;
flex: 0 0 200px;
}
.item-2 {
order: 3;
flex: 0 0 200px;
}
.item-3 {
order: 2;
flex: 0 0 300px;
}
.item-1, .item-2, .item-3 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I created a small sample that shows movie covers and I like the "flex: calc(...)" in action. As the browser window is reduced the size of the images are also reduced a bit. However notice when the image wraps, the wrapped image is in full width. Is it possible to make the wrapped image to be the same size as the images above it?
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.movies {
max-width: 1300px;
margin: 0 auto;
}
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
margin: 10px 15px 0;
}
.flex-item > img {
width: 100%;
height: 100%;
display: block;
}
/* Tablet */
#media screen and (min-width: 40em) {
body {
background: limegreen;
}
.movies {
max-width: 700px;
}
.flex-item {
margin: 0 15px 32px;
flex: calc(50% - 30px);
}
}
/* Desktop */
#media screen and (min-width: 70em) {
body {
background: lightyellow;
}
.movies {
max-width: 1200px;
}
.flex-item {
margin: 0 6px 15px;
flex: calc(33.3333% - 20px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="learn-flex.css">
<title>Learn Flex</title>
</head>
<body>
<div class="movies">
<div class="flex-container">
<div class="flex-item-1 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
</div>
<div class="flex-item-2 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
</div>
<div class="flex-item-3 flex-item">
<img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
I want the image with the dogs to be the same size as the ones above and leave the space on the right side empty, since there is no fourth cover. Is it possible to achieve that with flexbox?
If you are setting the width of a flex item you can also ask that it neither shrink nor grow. e.g. in your tablet case:
.flex-item {
margin: 0 15px 32px;
flex: 0 0 calc(50% - 30px);
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.movies {
max-width: 1300px;
margin: 0 auto;
}
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
margin: 10px 15px 0;
}
.flex-item > img {
width: 100%;
height: 100%;
display: block;
}
/* Tablet */
#media screen and (min-width: 40em) {
body {
background: limegreen;
}
.movies {
max-width: 700px;
}
.flex-item {
margin: 0 15px 32px;
flex: 0 0 calc(50% - 30px);
}
}
/* Desktop */
#media screen and (min-width: 70em) {
body {
background: lightyellow;
}
.movies {
max-width: 1200px;
}
.flex-item {
margin: 0 6px 15px;
flex: 0 0 calc(33.3333% - 20px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="learn-flex.css">
<title>Learn Flex</title>
</head>
<body>
<div class="movies">
<div class="flex-container">
<div class="flex-item-1 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
</div>
<div class="flex-item-2 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
</div>
<div class="flex-item-3 flex-item">
<img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
Here's how my child divs look and I'm trying to make them have less space in between when they wrap
I think the problem is in the media query
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
width: 100%;
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
/* added the line above remove if erros */
}
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: red;
align-items: center;
}
.item {
margin: 2% 1%;
width: 95%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.container-1 img {
width: 50%;
height: 100%;
}
.container-2 {
flex-direction: row;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.item {
margin: 2% 1%;
width: 25%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/menu.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu | Andy's House</title>
</head>
<body>
<div class="container-2">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</body>
</html>
I want to make them have less space between them. If anyone knows how to, it would be greatly appreciated!
P.S: If you couldn't tell, I am a noob. So, I am sorry :(
The problem wasn’t the media query. I would change the container height to auto. Like this:
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
background-color: red;
align-items: center;
}
I'm trying to create a layout using the Flex structure. This is exactly the main image I wanted it to be.
This layout will also be compatible with the mobile view.
1- My Sidebar component doesn't stick to the bottom of my hero component. I used "margin-top: -200px;" for this problem. but I don't want that.
2- Between my components, I want to use margin as pictured. But because I calculate the size of each component as a percentage of "%" and they completely cover the page, if I give margin, they become wrap. What's the right way for me to do this ?
3- Do you think the flexbox settings I have applied are correct ? What would be better for me to change ?
Thank you in advance for your help.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #59D4EB;
text-align: center;
height: 80px;
}
/* Main Container */
.container {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
/* Container */
.container-main {
display: flex;
flex-wrap: wrap;
}
/* Items */
.hero {
flex: 1 0 40%;
height: 400px;
background-color: #D5C9E2;
}
.main-content {
flex: 1 0 60%;
height: 600px;
background-color: #F5C546;
}
.sidebar {
height: 500px;
flex: 1 0 40%;
background-color: #A0C263;
/* I DONT WANT USE THİS MARGİN-TOP */
margin-top: -200px;
}
.extra-content {
flex: 1 0 60%;
background-color: #898989;
height: 300px;
}
/* Container */
.images-posts-cont {
display: flex;
height: 150px;
}
/* Items */
.images {
flex: 1 0 70%;
background-color: #53B774;
}
.posts {
flex: 1 0 30%;
background-color: #F3CDDD;
}
/* Footer */
.footer {
text-align: center;
height: 80px;
background-color: #F4A540;
}
#media screen and (max-width:599px) {
.hero {
flex: 1 0 100%;
order: 1;
}
.sidebar {
flex: 1 0 100%;
order: 2;
}
.main-content {
order: 3;
}
.extra-content {
order: 4;
}
}
;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="src/css/test.css">
<title> Flexbox Layout</title>
</head>
<body>
<!-- FlexBox Layout -->
<header class="header">
<h2>header</h2>
</header>
<div class="container">
<section class="container-main">
<div class="hero">
<h2>hero</h2>
</div>
<div class="main-content">
<h2>main-content</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>
<div class="extra-content">
<h2>extra content</h2>
</div>
</section>
<section class="images-posts-cont">
<div class="images">
<h2>related images</h2>
</div>
<div class="posts">
<h2>related posts</h2>
</div>
</section>
<footer class="footer">
<h2>footer</h2>
</footer>
</div>
</body>
</html>
I think you can still use flex. Just you have to wrap both components left and right with div.
left = > hero and side nav
right = > main content and extra content
I just add 2 div. Look below the code.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #59D4EB;
text-align: center;
height: 80px;
}
/* Main Container */
.container {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
/* Container */
.container-main {
display: flex;
flex-wrap: wrap;
}
/* Items */
.left{
width: 40%;
}
.right {
width: 60%;
}
.hero {
height: 400px;
background-color: #D5C9E2;
}
.main-content {
flex: 1 0 60%;
height: 600px;
background-color: #F5C546;
}
.sidebar {
height: 500px;
flex: 1 0 40%;
background-color: #A0C263;
/* I DONT WANT USE THİS MARGİN-TOP */
}
.extra-content {
flex: 1 0 60%;
background-color: #898989;
height: 300px;
}
/* Container */
.images-posts-cont {
display: flex;
height: 150px;
}
/* Items */
.images {
flex: 1 0 70%;
background-color: #53B774;
}
.posts {
flex: 1 0 30%;
background-color: #F3CDDD;
}
/* Footer */
.footer {
text-align: center;
height: 80px;
background-color: #F4A540;
}
#media screen and (max-width:599px) {
.hero {
flex: 1 0 100%;
order: 1;
}
.sidebar {
flex: 1 0 100%;
order: 2;
}
.main-content {
order: 3;
}
.extra-content {
order: 4;
}
}
<body>
<!-- FlexBox Layout -->
<header class="header">
<h2>header</h2>
</header>
<div class="container">
<section class="container-main">
<div class="left">
<div class="hero">
<h2>hero</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>
</div>
<div class="right">
<div class="main-content">
<h2>main-content</h2>
</div>
<div class="extra-content">
<h2>extra content</h2>
</div>
</div>
</section>
<section class="images-posts-cont">
<div class="images">
<h2>related images</h2>
</div>
<div class="posts">
<h2>related posts</h2>
</div>
</section>
<footer class="footer">
<h2>footer</h2>
</footer>
</div>
</body>
There can be 2 grids here , one with the header the contents and the footer, and then another grid inside the content area.
Here is a possibility to start from for such a layout with grid where a break point can turn the second grid into a flex column layout with a mediaquerie (set at 500px for the demo):
body {
/* first grid of 3 rows , flex can do it too */
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
body main {
/* second grid for the contents in between header and footer */
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 5px 0;
grid-gap: 5px;
}
header {
background: #74d3e8;
}
/* set each element inside cell(s) of the grid */
.main {
grid-row: 1 / span 2;
grid-column: 2 / span 2;
background: #f0c354;
}
.hero {
grid-column: 1;
grid-row: 1;
background: #d4cbe0;
}
.sidebar {
grid-column: 1;
grid-row: 2 / span 2;
background: #a7be6d;
}
.extra {
grid-column: 2 / span 2;
grid-row: 3;
background: #898989;
}
.relI {
grid-column: 1 / span 2;
grid-row: 4;
background: #58b076;
}
.relP {
grid-column: 3;
grid-row: 4;
background: #edd0de;
}
footer {
background: #f4a540;
}
/* set here your break point */
#media screen and (max-width: 500px) {
body main {
display: flex;
flex-flow: column;
}
.main {
flex: 1;
}
/* from you can use order to reset order of the boxes in main */
}
<header>header</header>
<main>
<article class="main">Main content</article>
<section class="hero">hero</section>
<aside class="sidebar">Sidebar</aside>
<section class="extra">Extra content</section>
<aside class="relI">Related images</aside>
<aside class="relP">Related post</aside>
</main>
<footer>Footer</footer>
Usefull ressource to go further : https://gridbyexample.com/ */ https://css-tricks.com/snippets/css/complete-guide-grid/
here is a demo to play with : https://codepen.io/gc-nomade/pen/jObgNOO
Trying to arrange divs using Flexbox and not sure what I want to do is even possible.
Desired look at 769 pixels is to have column F expand down the entire height of the container on the left, and G and H stack on top of each other to the right (run the code snippet to see).
Once the screen resolution gets below 768 the look I have currently is the desired result for that view (F and G on the same row and H below spanning the width of both).
body {
background: #f5f5f5;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
.title {
font-family: 'Montserrat';
font-size: 24px;
line-height: 30px;
display: inline-block;
vertical-align: middle;
}
.card {
margin: 20px 0;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.container.show-border, .element.show-border {
border: 1px red solid;
padding: 9px;
}
.content {
color: #fff;
background-color: #cccccc;
padding: 20px;
font-family: 'Montserrat';
font-size: calc(1vw + 1em);
}
#media (max-width: 375px) {
.content {
padding: 5px;
font-size: 0;
text-indent: -9999999em;
}
}
.container, .element {
padding: 10px;
}
.flex {
display: flex;
box-sizing: border-box;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.element {
min-width: 100px;
}
.content {
flex: 1 100%;
}
.structure {
min-height: 480px;
}
.structure-2 {
flex: 1 44.4444444444%;
}
.f {
flex: 1 25%;
min-height: 480px;
}
.g {
flex: 1 75%;
}
.h {
flex: 1 75%;
}
#media (max-width : 768px ){
.structure-2, .f, .g {
flex: 1 50%;
min-height: 480px;
}
.h {
flex: 1 100%;
min-height: 480px;
}
}
<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2">F</td>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
</tbody>
</table>
<div class="wrap">
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-2">
<div class="flex element f">
<div class="content"> F </div>
</div>
<div class="flex element g">
<div class="content"> G </div>
</div>
<div class="flex element h">
<div class="content"> H </div>
</div>
</div>
</div>
</div>
</div>
You could change the flex-direction after 769px;. Something like this:
#media (min-width: 769px ){
.structure-2{
flex-direction: column;
flex-wrap: wrap;
}
.element{
flex: 1 1 auto;
width:50%;
}
.f{
height:100%;
}
}
P.S. I changed also your #media (max-width : 1608px ) to #media (max-width : 768px ) to remove some conflicts.
body {
background: #f5f5f5;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
.title {
font-family: 'Montserrat';
font-size: 24px;
line-height: 30px;
display: inline-block;
vertical-align: middle;
}
.card {
margin: 20px 0;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.container.show-border, .element.show-border {
border: 1px red solid;
padding: 9px;
}
.content {
color: #fff;
background-color: #cccccc;
padding: 20px;
font-family: 'Montserrat';
font-size: calc(1vw + 1em);
}
#media (max-width: 375px) {
.content {
padding: 5px;
font-size: 0;
text-indent: -9999999em;
}
}
.container, .element {
padding: 10px;
}
.flex {
display: flex;
box-sizing: border-box;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.element {
min-width: 100px;
}
.content {
flex: 1 100%;
}
.structure {
min-height: 480px;
}
.structure-2 {
flex: 1 44.4444444444%;
}
.f {
flex: 1 25%;
min-height: 480px;
}
.g {
flex: 1 75%;
}
.h {
flex: 1 75%;
}
#media (max-width : 768px ){
.structure-2, .f, .g {
flex: 1 50%;
min-height: 480px;
}
.h {
flex: 1 100%;
min-height: 480px;
}
}
#media (min-width: 769px ){
.structure-2{
flex-direction: column;
flex-wrap: wrap;
}
.element{
flex: 1 1 auto;
width:50%;
}
.f{
height:100%;
}
}
<div class="wrap">
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-2">
<div class="flex element f">
<div class="content"> F </div>
</div>
<div class="flex element g">
<div class="content"> G </div>
</div>
<div class="flex element h">
<div class="content"> H</div>
</div>
</div>
</div>
</div>
</div>
When device width is under 769px:
- class ".f" will take the whole width - 100%
- classes ".g, .h" will take the half width - 50%
#media (max-width: 769px) {
.f {
flex: 1 100%;
}
.g,
.h {
flex:0 50%;
}
}