Accomplished Grid through Flexbox can this be further polished

HTML & CSS
#1

image
image791×421 2.33 KB

I am trying to achieve grid through the flexbox system as in the image, and I succeeded:

Can there be a better way to achieve this by staying in the realms of flexbox for now.

CSS →

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

body {
	font-family: 'Lato', sans-serif;	
	font-size: 3rem;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Lato', sans-serif;	
	padding: 0;
	margin:0;
	color: #2D2D2D;
}
p {
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	line-height: 1.675;
}
h1{
	font-size: 2.5rem;
}
ul {
	list-style-type: none;
}
section {	
	max-width: 700px;
	margin:auto;
	padding: 20px;
}


.box {
  width: 100%;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10vh 0;
}
.box1 {background-color:  #9b59b6;}
.box2 {background-color:  #34495e;}
.box3 {background-color:  #e67e22;}
.box4 {background-color:  #e74c3c;}
.box5 {background-color:  #2ecc71;}

.flexgrid {
  display: flex;
  min-height: 50vh;
}

.left-side,
.right-bottom,
.right-top {
  display: flex;
}

.right-side {
  display: flex;
  flex-wrap: wrap;
}

.left-side,
.right-side {
  width: 50%;
}

.right-side > * {
  width: 100%;
}


.left-side2, .right-side2 {
	width: 25%;
	display: flex;
	flex-wrap: wrap;
}
.medium {
	width: 50%;
	display: flex;
}

HTML →

<!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="style.css">
	<title>Document</title>
</head>
<body>
	<section class="flexgrid">
		<article class="left-side">
			<div class="box box1">1</div>
		</article>
		<article class="right-side">
			<div class="right-top">
				<div class="box box2">2</div>
			</div>
			<div class="right-bottom">
				<div class="box box3">3</div>
				<div class="box box4">4</div>
			</div>
		</article>
	</section>

	<section class="flexgrid">
		<article class="left-side">
			<div class="box box1">1</div>
		</article>
		<article class="right-side">
			<div class="right-top">
				<div class="box box2">2</div>
				<div class="box box3">3</div>
			</div>
			<div class="right-bottom">				
				<div class="box box4">4</div>
				<div class="box box5">5</div>
			</div>
		</article>
	</section>

	<section class="flexgrid">
		<article class="left-side2">
			<div class="box box2">2</div>
			<div class="box box3">3</div>			
		</article>
		<article class="medium">
			<div class="box box1">1</div>			
		</article>
		<article class="right-side2">
			<div class="box box4">4</div>
			<div class="box box5">5</div>
	</article>
	</section>

</body>
</html>
#2

These layouts look more suited to Grid than Flexbox.
But what you are really missing is the power of grid and flex to make the layouts responsive.

1 Like
#3

Thye are already responsive I think. Did you mean when the width fall short they should come in one column one under the another?

At this monent I do not know grid, but will try after I get some Knack over that.

#4

It depends on what the eventual content will be.
If it is just coloured rectangular blocks, what you have may be fine.
But if those blocks contained body text, columns that are so narrow they can barely contain a single word, let alone a decent length line of text, will not make very good reading.
Likewise, I can’t imagine them being much good for image content either.
It seems likely you will want an alternative layout for small screens.

1 Like
#5

Correct. Or may be just give them all boxes 100% width when total width available is too short.

#6

Grids and Flex boxes are pretty powerful CSS tools

<main id="content" class="mainStyle"><!-- Part of a grid -->
    <div class="twoBoxes"> <!-- flex boxes -->
        <div class="box">

        </div>
        <div class="box dkBlueGray">
            <?= $calendar ?>
        </div>
    </div>
</main>

I design for smaller screens first then work my way up to the larger screens as you can control grids and flex thru media queries which makes it easier in my opinion ->

Just a few snippets in what I mean

@media screen and (min-width: 50em) {
  @supports (display: flex) {

and this


@supports (grid-area: auto) {

  @media screen and (min-width: 75em) {
1 Like
#7

The benefit of using CSS grid would be that you could have a linear set of divs rather than the nested approach that flexbox requires. This make re-ordering for different screen sizes much easier as each element can be moved independently unlike flex where you have nested sections that can never escape from their section.

e.g. a grid layout for your first example would look like this.

<section class="grid">
  <div class="grid-left box box1">1</div>
  <div class="grid-top-right box box2">2</div>
  <div class="grid-bottom-left box box3">3</div>
  <div class="grid-bottom-right box box4">4</div>
</section>

The html is so much cleaner and easier to manage. (Note the classnames are not semantic but easier to understand in a demo. In production they should be specific to the content areas because of course you will be moving them around so left and right are immaterial.)

The css is pretty straight forward also.

/* Grid ....*/

.grid {
  display: grid;
  width: 100%;
  grid-template-areas:
    "lside  rside rside"
    "lside   mid1 mid2";
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr 1fr;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}
.grid-left {grid-area: lside;}
.grid-top-right {grid-area: rside;}
.grid-bottom-left {grid-area: mid1;}
.grid-bottom-right {grid-area: mid2;}

3 Likes