Skip to content

Instantly share code, notes, and snippets.

@oelna

oelna/flexbox.css

Last active April 1, 2022 14:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oelna/6babb1e9a89147d5a914ff2596d63c99 to your computer and use it in GitHub Desktop.
Save oelna/6babb1e9a89147d5a914ff2596d63c99 to your computer and use it in GitHub Desktop.
Download ZIP
Rasterexperimente mit Flexbox und Grid, HTML-Kurs April 2022
Raw
flexbox.css
html {
font: 125%/1.2 system-ui;
background-color: #999;
}
img {
max-width: 100%;
height: auto;
display: block;
}
p { margin: 0; }
.container {
width: 75%;
outline: 0px solid #f0f;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
background-color: #fff;
display: flex;
flex-wrap: wrap;
gap: 1em;
padding: 3em 3em 6em;
margin-bottom: 18em;
}
.container > div {
flex-basis: calc(25% - (1em / 4 * 3));
outline: 0px solid #f0f;
border-top: 1px solid #000;
padding-top: 0.5em;
}
.container .cell-2 {
flex-basis: calc(50% - (1em / 4 * 2));
}
.container .cell-3 {
flex-basis: calc(75% - (1em / 4 * 1));
}
.container .cell-4 {
flex-basis: calc(100%);
}
.container > div img {
width: 100%;
}
.caption {
font-size: 0.65rem;
line-height: 1.35;
}
Raw
flexbox.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Raster</title>
<link rel="stylesheet" href="flexbox.css" />
</head>
<body>
<div class="container">
<div class="cell-2">I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
<div class="cell-2">The middle of the menu I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
<div class="cell-3">
<img src="IMG_8411.JPG">
</div>
<div class="cell-1">
<p class="caption">I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</p>
</div>
<div class="cell-4">Think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
<div class="cell-2">I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
</div>
</body>
</html>
Raw
grid.css
html {
font: 125%/1.2 system-ui;
background-color: #999;
}
img {
max-width: 100%;
height: auto;
display: block;
}
p { margin: 0; }
.container {
width: 75%;
outline: 0px solid #0ff;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
background-color: #fff;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: minmax(100px, auto);
gap: 1em;
padding: 3em 3em 6em;
margin-bottom: 18em;
}
.container > div {
outline: 0px solid #f0f;
border-top: 1px solid #000;
padding-top: 0.5em;
}
.container .cell-2 {
grid-column: span 2;
}
.container .cell-3 {
grid-column: span 3;
}
.container .cell-4 {
grid-column: span 4;
}
.container > div img {
width: 100%;
}
.caption {
font-size: 0.65rem;
line-height: 1.35;
}
Raw
grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Raster</title>
<link rel="stylesheet" href="grid.css" />
</head>
<body>
<div class="container">
<div class="cell-2">I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
<div class="cell-2">The middle of the menu I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
<div class="cell-3">
<img src="IMG_8411.JPG">
</div>
<div class="cell-1">
<p class="caption">I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</p>
</div>
<div class="cell-4">Think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
<div class="cell-2">I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment