If a site like Wikipedia is too wide, wouldn't you just make your browser window thinner? Mine has never been wider than half the display since I got a widescreen LCD ~ 15 years ago.
Full-Bleed Layout Using CSS Grid
131–140 of 277 posts
Re: Full-Bleed Layout Using CSS Grid
#132I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…
This reminded me of days where we used to do layout.
Re: Full-Bleed Layout Using CSS Grid
#133If there's any chance the content on your page will need to be printable or turned into a PDF, do not use CSS Grid. It will get obliterated no matter which browser you use. I made a mobile responsive resume using CSS Grid which I eventually had to completely redo the styling because Grid broke everything.
This is good advice. I recently tried to rewrite my resume in HTML and CSS because I was annoyed with LibreOffice's (though Word would be no different) table handling/UX - wherein my table ended right before the bottom page margin so I ended up with an unnecessary trailing blank page. After switching to CSS grids, I had problems with alternating row background colors (I achieved it, but relied on knowing the contents…
If you're printing a résumé I cannot recommend LaTeX highly enough. It's a hassle to set up, it's niche so you'll probably only ever use it for your résumé unless you (re)enter academia, and the learning curve is a bear. But your résumé will sing and if you like to look at beautiful type while you work this will feel good. You may find yourself writing up set theory problems just for fun.
Protips: \usepackage[garamond]{mathdesign} sudo getnonfreefonts --sys -a
https://ctan.org/pkg/mathdesign https://tug.org/fonts/getnonfreefonts/
Re: Full-Bleed Layout Using CSS Grid
#134Earlier quoted context omitted.
True - I'm lucky not to have to consider versions of IE prior to 11 on most projects I work on, and I can usually get things working there, although there's a flexbox thing that I always forget with IE11 that catches me out. I stand by my comment if you don't have to do IE < 11 though.
Even just IE11 is pretty bad given the state of grid and flexbox on IE11.
Yeah, grid is pretty much not worth it imo, as you have to do so much differently. You can make flexbox work though.
Re: Full-Bleed Layout Using CSS Grid
#135I don't like selectively making some children full bleed within an otherwise constrained container. Use full bleed containers instead imo and don't mix the two
How do you write your full bleed containers, and why do you prefer them?
I’m using Bootstrap’s approach of a `.container-fluid` class for a full-bleed container, and a `.container` class for the standard centered and fixed width container.
I’m interested in applying CSS Grid as a progressive enhancement specifically targeting browsers supporting it, and keeping what I do today for browsers that don’t.
Re: Full-Bleed Layout Using CSS Grid
#136Is it just me and/or Desktop Firefox? The first example shows fixed navigation/ads and flexible content, but then the article goes on to demonstrate fixed content with flexible side bars.
Which of these options does the author consider the real Holy Grail?
Re: Full-Bleed Layout Using CSS Grid
#137Great article. While CSS grid is very powerful, maybe I'm not seeing the full picture in the examples: aren't the examples possible with just p { margin: 0 auto; max-width: 65ch } ? What does grid bring here?
I think part of it is that there are probably lots of additional items that you want to constrain to the main column, so your CSS would end up looking more like: #content p, h1, h2, h3, nav { .. } Kind of a pain to manually specify each element that you want to constrain, when it's most of them. This approach allows you to instead target the items that you don't want to constrain. Additionally, as a more specific iss…
Use a negative margin on the full bleed item? Bit hacky, but works fine:
.content {
max-width: 85ch;
width: 100%;
margin: 0 auto;
}
.content img,
.content .full-bleed {
width: 100vw;
height: auto;
padding-left: 50%;
margin-left: -50vw;
}Re: Full-Bleed Layout Using CSS Grid
#138I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…
there's virtue to having smaller isolated components when possible. kind of a weird example, but the other day I tried to make a huge table responsive (that needed to be paginated badly, but that was an issue out of my reach) - I found out that chrome actually maxes out at 1000 rows for display:grid, and then your layout just breaks. I converted it to flexbox and getting it to look the way I wanted was way easier than I expected, plus I could support ie11 without having to do the weird ms grid syntax. I imagine it's also faster for the browser
Re: Full-Bleed Layout Using CSS Grid
#139Is it just me and/or Desktop Firefox? The first example shows fixed navigation/ads and flexible content, but then the article goes on to demonstrate fixed content with flexible side bars. Which of these options does the author consider the real Holy Grail?
Flexible content is deemed a problem under the heading "The Problem".
Re: Full-Bleed Layout Using CSS Grid
#140The article starts out with the problem of wikipedia pages. Does anyone have a solution to wikipedia pages? I tried to adapt the articles approach to wikipedia. Create an account on wikipedia, or login. Then go to https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsec... I chose MinervaNeue with Custom CSS. Here is what I set the CSS to: main { display: grid; grid-template-columns: 1fr min(65ch, 100%) 1fr; } ma…
Not sure the answer to your question but worth mentioning that Wikipedia is working on a major redesign that will hopefully address some of these things.
From what I've understood it's already rolling out in small steps.