#grid

Estimation of Annual Energy Bills in the EU

via ▻https://diaspora.psyco.fr/p/12392572 || Fediverse

♲ Athénien d’Isar - 2026-04-09 17:07:20 GMT

– The average annual energy bill in the EU would rise from €3,792 to €5,688 – 12% of total household spending;

– The average annual energy bill would account for more than 10% of all household spending in the majority of member states and more than 15% in six member states;

– The average annual energy bill would cost €2,000 more in 11 member states (see notes for figures for all countries).

Please see the attached explanatory note on the estimations made by the European Trade Union Institute. For further statistical enquires, please contact Wouter Zwysen: wzwysen@etui.org

▻https://mcusercontent.com/432f45140d9f6f58d0cb10aa1/files/0e3193cc-fb7f-bf18-23aa-64dfce032c5b/Explantory_note_on_energy_estimates.docx

♲ @Akshay@eupolicy.social:

“Trade unions are calling for radical EU action to lower energy costs as a new analysis shows that the average household bill will rise by more than €1800 a year if current prices persist.”

They want fiscal support to protect jobs, electricity market reform, and investment in a just energy.

▻https://www.etuc.org/en/pressrelease/workers-face-eu1800-energy-bill-hike-without-eu-action

#EUPol #EU #UE #Union #Labour #Hormuz #Energy #Grid #Electricity #Economy #OilCrisis

Better CSS layouts: Time.com Hero Section
▻https://ishadeed.com/article/time-layout

In this article, I went through a #layout that looks simple at first, and took it further to make it more dynamic with #CSS. Having this flexibility is a game-changer as it will allow you to build fluid and conditional layouts, with less CSS.

For example, being able to combine CSS #:has() and #grid-area is a powerful combination! Add #container #querie to it, and magic will happen.

▻https://ishadeed.com/_astro/layout-analyze-1.C7KPAnhT_o8i4H.webp
▻https://ishadeed.com/_astro/layout-analyze-2.DtggeFWO_2fnkGR.webp
▻https://ishadeed.com/_astro/layout-analyze-3.DDurODEH_1f4aoM.webp
▻https://ishadeed.com/_astro/layout-analyze-4.Cze0A0FS_1vo7XE.webp
▻https://ishadeed.com/_astro/layout-analyze-5.DbQDrqe8_Z1MpGWI.webp

#CSS #Grid #Areas
▻https://ishadeed.com/article/css-grid-area

https://ishadeed.com/assets/grid-named-areas/twitter-card.jpg

Pour les personnes qui comme l’auteur ont du mal à se rappeler des références des 1fr :)

Perso je m’étais bien amusé à apprendre ça avec ▻https://seenthis.net/messages/702365

#css_grid

#CSS #Grid #Generator
▻https://cssgridgenerator.io

CSS grid generator is a tool that helps developers create custom CSS grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size.

#gridelincarver #zionism | TikTok
▻https://www.tiktok.com/@radfemgrandma/video/7319732930581122350
▻https://p16-sign.tiktokcdn-us.com/tos-useast5-p-0068-tx/osK9BfIIBBqyiscCXUi6nDEnyApIbYCw0EItSA~tplv-photomode-video-s

An Interactive Guide to #CSS #Grid
▻https://www.joshwcomeau.com/css/interactive-guide-to-grid

In this tutorial, I’m going to share the biggest lightbulb moments I’ve had in my own journey with CSS Grid. You’ll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it.

To break things down even further:
– justify — deals with columns.
– align — deals with rows.
– content — deals with the grid structure.
– items — deals with the DOM nodes within the grid structure.

Gridviz : Une bibliothèque pour la cartographie en ligne de données carroyées
webinaires/cartogeoviz8-graffuri.md at main · magisAR9/webinaires · GitHub
▻https://github.com/magisAR9/webinaires/blob/main/cartogeoviz8-graffuri.md

https://github.com/magisAR9/webinaires/raw/main/gridviz.png

Webinaire Carte Blanche #8. jeudi 5 Octobre 2023 (12h30-13h30)
Gridviz : Une bibliothèque pour la cartographie en ligne de données carroyées

#Gridviz est une bibliothèque JavaScript qui permet de visualiser des données quadrillées (ou tout ensemble de données tabulaires avec une position x/y) dans le navigateur dans une grande variété styles cartographiques avancés. Contrairement aux outils traditionnels de cartographie web à base de données matricielles, Gridviz effectu tout le rendu tout côté client, à la volée.

Germain Forestier sur Twitter : "1/ Premier essai d’un « grid cartogram » ou « grid/tile map » pour la France. Dans cette représentation chaque département a la même taille (ici un carré).

▻https://twitter.com/gforestier/status/1342789451571982336
▻https://threadreaderapp.com/thread/1342789451571982336.html

#cartographie #covid #grid-cartograms

Y a plein de gens qui aiment les cartes ici. (le thread cite un article de @severo d’ailleurs ▻https://observablehq.com/@severo/grid-cartograms)

https://pbs.twimg.com/media/EqKLnU5XMAAuCLa.jpg https://pbs.twimg.com/media/EqKL9A2XMAIJZRu.jpg https://pbs.twimg.com/media/EqKMD_EWMAA0AHj.jpg

Ceci dit, la France mérite des héxagones, quand même, sapristi...

https://pbs.twimg.com/media/EqKMcXzWMAI13bu.png

#Grid for layout, #Flexbox for components
▻http://ishadeed.com/article/grid-layout-flexbox-components

https://ishadeed.com/assets/grid-flex/grid-vs-flexbox-1.png

Before diving into concepts and examples, I want to make sure that you understand the main difference between #CSS grid and flexbox. CSS Grid is a multi-dimension layout module, which means that it has columns and rows. Flexbox can lay out its child items either as columns or rows, but not both

Let me be clear about that, there is no direct way to decide between CSS grid and flexbox. Adding on that, there is no correct or incorrect way to use them. This article is a kind of guide that recommends using a technique for a specific use-case. I will explain the general concept, and then go into examples, and the rest is on you to explore and experiment more.

Deciding between CSS grid and flexbox can be a bit hard (sometimes), especially if you are new to CSS. I can hear you! Here are some initial kick-off questions that I ask myself when choosing between them:

– How the component child items are displayed? Inline or as columns and rows?
– How the component is expected to work on various screen sizes?

Article intéressant avec pas mal d’exemples d’usage.

Four lines of CSS to make a calendar layout with CSS grid – Js Craft
▻http://www.js-craft.io/blog/four-lines-of-css-to-make-a-calendar-layout-with-css-grid

calendrier HTML avec grid + une astuce pour placer le premier jour correctement

#grid #css #calendrier

Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout :
concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Exemples : ►https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

#CSS #grid #flexbox #layout

« How to create an image gallery with CSS Grid » by Abhishek Jakhar, 27.12.2018 ▻https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c #css #grid #webcomponents #gallery

Jules Forrest on CodePen
▻https://codepen.io/julesforrest

https://s.cdpn.io/profiles/user/244137/512.jpg?1

What is Grid Layout? [10 #shopify themes examples]
▻https://hackernoon.com/what-is-grid-layout-10-shopify-themes-examples-16a7cb746e7c?source=rss--

https://cdn-images-1.medium.com/max/800/1*D43yBOZd3MsOACplnJBp3Q.jpeg

What is Grid Layout? PLUS: 10 Shopify Themes ExamplesMessy structures with elements overlapping each other and jumping all over the page could be very creative and original, but the designer has to invest an enormous amount of efforts to make it look understandable. On the other hand, pages that have an accurate layout with strict alignment and clear organization don’t demand some extra observation skills from the users and thus are more user-friendly. The layouts built in a precise and flat way are called grid layout themes.The grid is a set of horizontal and vertical lines which help to define where rows and columns will take place on the page. All the content you want to place to the website is placed into those rows and columns and that’s why it looks so accurate.Despite messy layout (...)

#whats-grid-layout #grid-layout #shopify-theme

CSS Grid in IE : CSS Grid and the New Autoprefixer | CSS-Tricks
▻https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer

https://css-tricks.com/wp-content/uploads/2018/06/ie-tiles.jpg

Utilisation des propriétés CSS3 grid avec Internet Explorer : les adaptations/contournements apportés par Autoprefixer et les propriétés vraiment pas supportées.

Voir aussi :
– le repo d’autoprefixer ▻https://github.com/postcss/autoprefixer (Gulp / Grunt / js autonome...)
– le repo de html-autoprefixer pour les CSS inline : ▻https://github.com/RebelMail/html-autoprefixer

#grid #autoprefixer #Internet_explorer #prefixe #css3

Grid Garden - un jeu pour apprendre les #grid #CSS
▻http://cssgridgarden.com

http://cssgridgarden.com/images/screenshot.png

#layout #web_design #css-grid #carottes

Don’t Use My Grid System (or any others)
▻https://noti.st/mirisuzanne/DDJo3H

https://on.notist.cloud/slides/ext/large-b975b5b4c1b9c897.png

#css#layout#grid

J’ai besoin d’aide avec des #CSS. J’essaie de reproduire la présentation ultra-alignée d’images carrées telle qu’on la trouve dans Photos sur l’iPhone. L’idée étant d’avoir des vignettes carrées dont la taille n’est pas totalement fixe, et si possible sans s’embêter avec les media queries usuelles selon la taille de l’écran (genre une case de largeur 25% quand on est entre 600 et 720 pixels…).

L’idée c’est que j’arrive à faire ça très bien avec une flex box :

https://i.imgur.com/Bmfv1da.jpg

Mais le hic, c’est la dernière ligne. Les deux premières lignes, ça fonctionne magnifiquement, les dimensions des vignettes carrées sont très bien gérées quelle que soit la largeur d’affichage, le nombre de vignettes par ligne se calcule tout seul avec « flexibilité », l’alignement est parfait. Bref le bonheur.

Mes CSS pour l’instant :

ul.carres_oeuvres {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap:  wrap;
	justify-content: flex-start;
	margin-right: 1px;
}		
ul.carres_oeuvres li {
	margin-top: 1px;
	margin-left: 1px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 150px;
}

Sauf comme tu vois, la dernière ligne, qui occupe toute la largeur mais ne s’aligne pas.

Je voudrais obtenir ceci :

https://i.imgur.com/YPLctAk.jpg

Et j’ai pas trouvé comment…

Front-End Tricks: 100% #css control of #masonry Layout w/ left-right content flow
▻https://hackernoon.com/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190

https://cdn-images-1.medium.com/max/1024/1*9jRvf6g6tMKS7jn84JmuOA.png

CSS column-count + array reordering = left-to-right content flowLive Demo: ▻https://github.com/jessekorzan/masonry-css-jsThe problem… column-count works great except for left-to-right scan readingMasonry Layouts… popularized by sites like Pinterest. Loved by non-coding designers and holy-grailed in corporate boardrooms.Naturally, many sharp front-enders have worked on solutions. We have several libraries, techniques and hacks to achieve this marvel of content display.There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.For me, especially in exploratory efforts, a pure-CSS method is a flexible and fast way to iterate. I don’t want to rely on DOM manipulation or end up with a contrived (...)

#react #javascript #grid-layout

Carrer Blog : 1 Line CSS Framework
▻http://www.vcarrer.com/2018/03/1-line-css-framework.html

you can make CSS grid layout only with one line of code.

tellement évident …

#css#layout#gridsystem

Accessibilité des tableaux responsives, et impact sur la lecture vocale de l’utilisation des propriétés css flex ou grid pour la ré-organisation des cellules.

Tables, CSS Display Properties, and ARIA | Adrian Roselli
▻http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html

http://adrianroselli.com/wp-content/uploads/2018/02/ARIA-flex-table_generated_thumb-150x150.png

#css#flex#grid#ARIA

CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts

https://hacks.mozilla.org/files/2018/02/hacksscreenshot-2_1c.jpg

The fundamental problem with Flexbox is that it is one dimensional. This makes Flexbox great for one dimensional uses, like toolbars and navbars, but it begins to fail when I need to align content both horizontally and vertically at the same time. Instead I need real two dimensional layout, which is why I need CSS Grid. Fundamentally Grid is 2D.

#grid #flexbox #css #webdesign

Ingrid | Visually build responsive layouts with CSS grid
▻http://ingrid.guide

#css#grid#pageBuilder#layout

New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn

How to make your HTML responsive by adding a single line of #CSS
▻https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css

https://cdn-images-1.medium.com/max/1200/1*jCNANupl0ECRzF6cOLuWNw.gif

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Titre un peu racoleur mais tout de même intéressant.

#grid