[Grid Layout] Use the repeat function to efficiently write grid-template values
to The Function use Write Template Grid layout
2023-09-14 09:00:52 时间
We can use the repeat()
function if we have repeating specifications for columns and rows. With the minmax()
function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.
Using repeat:
grid-template-columns: repeat( 3, /*each row has 3 repeat items*/ minmax(10px, auto) minmax(20px, auto) minmax(40px, auto) minmax(80px, auto) );
Can aslo add named grid line to it:
so that we can refer to those later.
.container { display: grid; grid-gap: 10px; height: 100vh; grid-template-columns: [start] repeat( 3, /*each row has 3 repeat items*/ [col-xs-start] minmax(10px, auto) [col-xs-end col-sm-start] minmax(20px, auto) [col-sm-end col-md-start] minmax(40px, auto) [col-md-end col-lg-start] minmax(80px, auto) [col-lg-end] ) [end]; } .box:nth-of-type(26){ grid-column: col-sm-start / end; }
相关文章
- org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request; nested exception is java.io.IOException: The temporary upload location [/tmp/tomcat.1428942566812653608
- JAVA Eclipse 启动 Eclipse 弹出“Failed to load the JNI shared library jvm_dll”怎么办
- JAVA Eclipse ActivityManager Warning Activity not started, its current task has been brought to the front怎么办
- System services not available to Activities before onCreate()
- [React] Use the React Context API to Globally Manage State
- [NPM] npm check to update the dependencies
- [JWT] JWT Signature With RS256 - Learn The Advantages Compared to HS256
- [Grid Layout] Use the repeat function to efficiently write grid-template values
- [Webpack] Use the Webpack Dashboard to Monitor Webpack Operations
- Don't know how to define struct flock on this system, set --enable-opcach=no
- The nodes should be added to the underlying vendor clusterware before adding them to the CRS cluster
- dialog--not attached to window manager
- [Cloud Architect] 10. Securing Access to Cloud Infrastructure
- [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
- [Node] Using dotenv to config env variables
- [Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def
- [Grid Layout] Use the minmax function to specify dynamically-sized tracks
- [AngularJS]16. Using ReviewController to handle the everything, ng-submit
- 多除了1次100的FM BAPI_CURRENCY_CONV_TO_INTERN_9
- 成功解决Please use the NLTK Downloader to obtain the resource:
- 已解决One or more issues caused the setup to fail.Please fix the issues and then retry setup.For more i
- 已解决Resource averaged_perceptron_tagger not found. Please use the NLTK Downloader to obtain the resou
- 已解决EROR 1064 (42000): You have an error in. your SOL syntax. check the manual that corresponds to yo
- 【K8S】Docker向私有仓库拉取/推送镜像报错(http: server gave HTTP response to HTTPS client)
- 【问题解决】The connection to the server localhost:8080 was refused
- 完美解决docker问题:Failed to allocate directory watch: Too many open files
- kubectl报错Unable to connect to the server: net/http: TLS handshake timeout
- ES mlockall作用——preventing that memory from being paged to the swap area