This collection demonstrates layout grids using <em>in-line</em> CSS along with HTML. These layouts offer more controlled and dynamic ways of combining image and text within your Twine pages. To access coding of the templates, Save the Twines from browser as HTML files, then import those files into your twinery.org:
<img src="https://clogosphere.neocities.org/learning.png" width="400" height="200">
You can copy and paste from the passages demonstrated in the links below. Replace the filler text with your own text/ Twine formatting, and replace linked image files with your own.
<b>TEMPLATES:</b>
<ul>
<li>[[Vertical Stack]]</li>
<li>[[3x3-Grid]]</li>
<li>[[Side-by-Side]]</li>
</ul> Learn more about these layouts by:
<em>studying patterns in the code, tweaking it, and seeing what happens
Google searching CSS Flexbox + CSS Grid
Using ChatGPT to generate grid layouts using CSS+HTML, then adapt to yr needs!</em>
<style>
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.block {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
.block p {
flex: 1;
}
.block img {
max-width: 320px;
height: 240px;
}
</style>
<div class="container">
<div class="block">
[img[https://clogosphere.neocities.org/if/ff/sky.gif][read-me]]
<p> [[click here to go back to menu|read-me]]
Nullam in tellus eget nunc commodo rhoncus.
Etiam in ex in arcu consectetur convallis</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam in tellus eget nunc commodo rhoncus.
Etiam in ex in arcu consectetur convallis</p>
<img src="https://clogosphere.neocities.org/if/ff/orb.gif" alt="Image 2">
</div>
<div class="block">
<img src="https://clogosphere.neocities.org/if/ff/orb2.gif" alt="Image 3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam in tellus eget nunc commodo rhoncus.
Etiam in ex in arcu consectetur convallis</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam in tellus eget nunc commodo rhoncus.
Etiam in ex in arcu consectetur convallis.</p>
<img src="https://clogosphere.neocities.org/if/ff/phone1.gif" alt="Image 4">
</div>
</div>
<style>.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 90%;
margin: 0 auto;
}
.item {
width: 30%;
margin-bottom: 2%;
text-align: left;
}
.item img {
width: 100%;
height: auto;
}
</style><div class="grid">
<div class="item">
[img[https://clogosphere.neocities.org/if/ff/phone1.gif][read-me]]
<p> [[click here to go back to menu|read-me]]
</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 2" width="320" height="240">
<p>Here is some more text. This is a second sentence.</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 3" width="320" height="240">
<p>This is some additional text. This is a third sentence.</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 4" width="320" height="240">
<p>Here is some more text. This is a fourth sentence.</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 5" width="320" height="240">
<p>This is some more additional text. This is a fifth sentence.</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 6" width="320" height="240">
<p>Here is yet more text. This is a sixth sentence.</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 7" width="320" height="240">
<p>This is even more text. This is a seventh sentence.</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 8" width="320" height="240">
<p>And here is the last bit of text. This is an eighth sentence.</p>
</div>
<div class="item">
<img src="https://clogosphere.neocities.org/if/ff/sky.gif" alt="Image 9" width="320" height="240">
<p>This is the end. This is a ninth sentence.</p>
</div>
</div>
<style>
.wrapper {
display: flex;
}
img {
flex: 0 0 50%;
margin: 0 20px 20px 0;
float: left;
}
p {
flex: 1;
margin: 0;
text-align: justify;
}
</style><div class="wrapper">
[img[https://clogosphere.neocities.org/if/ff/phone1.gif][read-me]]<p>Nulla vel quam sapien. Donec auctor nunc in neque cursus, vel suscipit nibh sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sit amet ultrices velit, nec elementum dolor. Morbi finibus tortor massa, at vehicula nulla ullamcorper quis. Donec sed suscipit nisl. Vestibulum tristique enim nec magna lacinia, at faucibus sapien bibendum. Vestibulum tempus laoreet nulla eu eleifend. Quisque interdum dui eget elit ultricies ullamcorper. Proin ut nibh id justo iaculis bibendum. Sed pulvinar nisi sapien, eget tincidunt lacus sodales eget. Proin sodales tellus sed lectus lobortis consequat. Sed ut dictum enim.
[[click here to go back to menu|read-me]]
</p>
</div>