Skip to main content

The Many Forms of An Image Gallery, ft HTML, CSS, and Sass

Going from v.1 to the completed v.3

I collect Disney mugs (and some non Disney ones). One from every Canon film . I want to put all (35? 37?) in a grid.

 Much of the base code for V1. came from the CSS Grid page here, at W3 Schools.

Version 1

I wanted to have more than 3 entries per row.

I thought sticking a new grid container (grid-cont) would fix that problem.

 


<div class="grid-cont">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  

  <!-- Puts it beneath but not to the side -->
</div>
<div class="grid-cont">
  <div class="grid-item">4</div>

 

 It just added a bit of space beneath the first 3.

I did end up getting a fourth box added in the row, but that seems to be the limit per row.

This article kind of encompasses the layout, but I'm not sure I can add different backgrounds to each tile like I want.

Version 2


Within .grid-item, I put this;

background-repeatno-repeat;
    background-sizeauto;
    backgroundurl(b1.jpg
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<!-- How can we change the amt of entries in the row? adjusting the grid container? -->
<div class="grid-cont">

And while the correct effect is in place, (The goal is one different image per box, not the same image repeated in every box). Will I have to make separate grid items for each of my 30+ images? Make each box its own grid and then do so?

 

<div class="grid-item"><p>check</p>
    <p>check</p>
    <p>check</p>
  </div>
  <div class="grid-item">6</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">3</div
  <div class="grid-item">4</div>
  <!-- Puts it beneath but not to the side -->
  <!-- I think it's just how the language works - 4 max -->

 

You can see the opacity is different in each box. 


So I went back to Youtube to find another tutorial; This one from XO PIXEL.

The original code is a little odd to me (You don't see my code here):

  • They make the paragraph text in the boxes links and in an unordered list. I can't see why. I took those aspects out and added some top padding to the top to push the text down.
  • I made the cursor a crosshair.

A separate issue from the coding; The opacity on the divs affects the other elements, like text, as well. I don't want it to. I want it to only affect the image. I put the !important marker.  

 It's a demo image, which is still not affected by opacity.

Also, all of the boxes are in a giant line instead of two in a row or so. 




Question List:

How can I put different images for the background in each grid without making 35 different grids.

How do I change the filter to only affect part of the elements.


Version 3



So on Jan 11th, Tyler Potts uploaded THIS video. You can tell by the screengrab of his video that there are placeholders in some boxes that can possibly be manipulated to hold different images.

It's focused more on Responsive CSS-ness (CSS Grid). I'm just here for the grids. Also used Sass for the first time - A compiler translated it into CSS. Why not just use CSS at that point

There is also a neat image placeholder code that's officially recognized (but not shown in the final page). Check out the final product here.

Here's a walkthrough I did, where I edit some things on the fly:






Comments

Popular posts from this blog

What Do You Need? [AKA; List of Offered Services / My Next Role] (2020)

I am a trusted outsourced remote consultant for your company.   I enjoy having the flexibility to take on temporary projects from time to time! I start at part-time, temp work for now. If we like each other, we can renegotiate. If anything sounds weird, out there, or unusual - Feel free to e-mail me .  3 Services Offered Writing :      You want to pay me to write more of *waves hand* this blog? I am game .     I write B2C e-mails going out to over 280 people weekly. [ Example Job Description ]        Auditing :        Something doesn't work on your page or in your app. I can find it, or you can lose business. [ Here ] [ Example Job Description ]   I really enjoy testing apps and webpage concepts! I have an iPhone and Android phones ready. Technical: Still as-needed, always remote, contract, or temporary. IT Operations Tech [ Example Job Description ]     Hardware and SaaS support.     Cisco routing and switching (Networking). CCNA, A+, Sec+, Azure certified WORKING ON: Junos

Portfolio of UX/Product Feedback [Vol. 1]

I browse websites and apps, while making note of things I find frustrating for end users. You have probably been linked here from a form or my resume. If you have any questions about what I'm looking for in a role, click here .   This post is not to shame, but to point out errors and hopefully make my talent for finding and documenting such mistakes clear to someone hiring. Contents: Instances where I offer constructive feedback on someone's website, logo, or app. Actions that were taken by the developers or artists.  I'm glad you want your webpages to be the best they can be with my help; If you need your sites audited, e-mail me . Latest Update -  November 20th, 2020.   Vol. 2 is here .

Contactless Tech’s Role in the New Guest Experience ft. Intelity and The George

 Contactless hospitality technology is growing. You want to get away, and you'll be damned if a little thing like a deadly virus will stop you! But you still don't want to touch things. Ew. During the chat between INTELITY CEO Robert Stevenson and THE GEORGE Director of Operations Kerrie Hunter, you’ll learn how the historic boutique hotel has adapted a mobile-first guest experience in the wake of COVID-19—and how they see contactless technology affecting the future of hospitality. I don't remember how I found INTELITY (probably hoping to score a position with them), but I liked them enough to stay on the e-mail lists.