pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mise en place de grid

Browse Source
This commit is contained in:
hugogogo
2021-01-26 11:23:22 +01:00
parent 8437e19ea0
commit 02b26a987a
1 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
pages/litterall.html
View File

@@ -19,32 +19,38 @@
width: calc(98%);
}
.horizontal {
display: flex;
flex-direction: raw;
}
.horizontal > * {
margin: 20px auto;
}
.vertical {
display: flex;
flex-direction: column;
}
.vertical > * {
margin: 20px auto;
}
.img_container {
flex-grow: 0;
justify-content: flex-start;
margin-left: -2px;
width: 100%;
/*
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: -2px;
*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
grid-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
grid-gap: 2px;
justify-content: center;
padding: initial;
*/
}
.img_container img {
.img_container > * {
margin: 2px;
border: 1px solid grey;
border: 1px solid lightgrey;
}
</style>
</head>
@@ -66,29 +72,29 @@
<p>
Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis.
</p>
<img class="centre" src="./docs/revues/litt23.jpg" alt="revue litterall" width="240">
<img class="centre last" src="./docs/revues/litt23.jpg" alt="revue litterall" width="240" height="410">
<div class="img_container">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120" height="205">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120" height="205">
</div>
</article>
</main>